带有静态数据的 Extjs 5.0 网格分页

Question

分页不适用于我的网格。有人可以让我知道为什么。我正在使用通过从控制器读取 xml 获得的静态数据。我想每页显示 10 条记录。

模型.js

Ext.define('Mymodel.model.settingModel', {
    extend: 'Ext.data.Model'
});    

Store.js

Ext.define('Mymodel.store.settingStore', {
    extend: 'Ext.data.Store',
    requires:['Mymodel.model.settingModel'],
    model: 'Mymodel.model.settingModel',
    pageSize:10,
     lastOptions: {params: {start: 0, limit: 10}}
 });

View.js

Ext.define('Mymodel.view.graphPanel', {
    extend: 'Ext.grid.Panel',
    layout:'border',
    alias: 'widget.graphPanel',
    name:'graphPanel',
    title: 'Tests',
    store: 'Mymodel.store.settingStore',
    pageSize:10,
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: 'Mymodel.store.settingStore',   // same store GridPanel is using
        dock: 'bottom',
        pageSize: 10,
        displayInfo: true
    }]
 });

Controller.js

Ext.define('Mymodel.controller.myController', {
extend:'Ext.app.Controller',
models:['Mymodel.model.settingModel'],
stores:['Mymodel.store.settingStore'],
init: function() {
Ext.Ajax.request({
            url: 'Sample.xml',
            success: function(response, opts) {
                var txt = response.responseText;
                parser=new DOMParser();
                xmlDoc=parser.parseFromString(txt,"text/xml");

                // I now build the modelField Array, Data Array and column array based on the xml      
                got and give it to the stores.

                var store = Ext.data.StoreManager.lookup('Mymodel.store.settingStore');
                store.setFields(modelfieldArr);
                store.setData(completeDataArr);
                store.setPageSize(10);
                store.load({
                  params: {
                    start: 0,
                    limit: 10
                 }
                 });

                var gridview = Ext.ComponentQuery.query('graphPanel')[0];
                gridview.reconfigure(store,columnarr);
            }
        });

    }
    });

Answer 1

您应该将代理设置为memory 并设置enablePaging: true。

Ext.define('Mymodel.store.settingStore', {
    extend: 'Ext.data.Store',
    config: {
        proxy: {
            type: 'memory',
            enablePaging: true,
            reader: 'array'
        }
    },
    requires: ['Mymodel.model.settingModel'],
    model: 'Mymodel.model.settingModel',
    pageSize: 10
});

要加载数据，请使用以下代码：

store.getProxy().setData(data);
store.read();

示例：http://jsfiddle.net/z2x074n0/3/