1

我试图找出在 ExtJs 4.1.0 网格中无限滚动的基本实现。

我正在处理这个示例http://ext4all.com/post/extjs-4-1-grid-infinite-scroll-in-mvc，此时我的代码实际上与示例相同。

当我的页面加载时，当第一个 ajax 请求触发并按预期工作时，网格会填充第一页数据。但是，当我向下滚动到网格底部时，什么也没有发生……我期待看到一个 ajax 请求触发，获取额外的数据（如示例中所示）。

有任何想法吗？

这是我的代码：

HTML

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="./extjs-4.1.0/resources/css/ext-all.css">
        <link rel="stylesheet" type="text/css" href="./styles.css">
        <script type="text/javascript" src="./extjs-4.1.0/ext-all-debug.js"></script>
        <script type="text/javascript" src="./test-scrolling.js"></script>
    </head>

    <body>
        <div id="page">
            <header>
                <div class='wrap'>
                     <h1>Test</h1>

                    <div class='clear'></div>
                </div>
            </header>
            <div class="content">
                <div class="wrap">
                    <div id="main"></div>
                </div>
            </div>
        </div>
    </body>
</html>

Javascript

Ext.define('AP.model.Log', {
    extend: 'Ext.data.Model',
    fields: [
        'Id',
        'ProcessId',
        'IndexRequest',
        'AssetIndexStart',
        'AssetIndexEnd',
        'StartDate',
        'EndDate']
});

Ext.define('AP.store.Log', {
    extend: 'Ext.data.Store',
    model: 'AP.model.Log',
    autoLoad: true,
    remoteSort: true,
    buffered: true,
    pageSize: 100,
    proxy: {
        type: 'ajax',
        url: 'http://localhost/...',
        limitParam: 'limit',
        reader: {
            type: 'json',
            root: 'Log',
            successProperty: 'Success'
        }
    }
});

Ext.define('AP.view.Log', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.log',
    title: 'Log',
    store: 'Log',
    initComponent: function () {
        this.columns = [{
            header: 'Index Start',
            dataIndex: 'AssetIndexStart',
            flex: 1
        }, {
            header: 'Index End',
            dataIndex: 'AssetIndexEnd'
        }, {
            header: 'Start Date',
            dataIndex: 'StartDate'
        }, {
            header: 'End Date',
            dataIndex: 'EndDate'
        }];
        this.callParent(arguments);
    }
});

Ext.define('AP.controller.Log', {
    extend: 'Ext.app.Controller',
    stores: ['Log'],
    models: ['Log'],
    views: ['Log'],
    init: function () {}
});

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    name: 'AP',
    appFolder: 'app',
    controllers: [
        'Log'],
    launch: function () {
        Ext.widget('log', {
            title: 'Log',
            width: 600,
            height: 400,
            renderTo: 'main'
        });
    }
});
4

0 回答 0