ExtJs 中GridPanel分页

 

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

Ext.Loader.setPath('Ext.ux', 'extjs/ux/');
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.toolbar.Paging',
    'Ext.ux.PreviewPlugin'
]);

 

Ext.onReady(function(){

    Ext.QuickTips.init();

    Ext.define('ForumThread', {
        extend: 'Ext.data.Model',
        fields: [
            'title'
        ]
    });

    // create the Data Store
    var store = Ext.create('Ext.data.Store', {
        pageSize: 2,
        model: 'ForumThread',
        remoteSort: true,
        proxy: {
            type: 'jsonp',
            url: 'data',
            reader: {
                root: 'topics',
                totalProperty: 'totalCount'
            },
            // sends single sort as multi parameter
            simpleSortMode: true
        }
    });

    var pluginExpanded = true;
    var grid = Ext.create('Ext.grid.Panel', {
        width: 700,
        height: 500,
        title: 'ExtJS.com - Browse Forums',
        store: store,
        disableSelection: true,
        loadMask: true,
       
        // grid columns
        columns:[{
            id: 'topic',
            text: "Topic",
            dataIndex: 'title',
            flex: 1,
            sortable: false
        }],
        // paging bar on the bottom
        bbar: Ext.create('Ext.PagingToolbar', {
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display"
        }),
        renderTo: Ext.getBody()
    });

    // trigger the data store load
    store.loadPage(1);
});

 

说明：在使用url数据加载时，生成的json数据必须以回调函数返回： 例如 Ext默认回调函数Ext.data.JsonP.callback1，那么数据格式为Ext.data.JsonP.callback1（jsondata【真正用于gridpanel的json数据】）

url参数：limit（一页最多展示多少条数据，类型int）；start（从第几条数据开始查询【要转向页面的数据在所有数据中的索引】）；callback（回调函数）