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