EXT JS 4.2中的网格分页

Question

我正在开发一个EXT JS应用程序，需要实现分页。所以我有一个大约10-15个搜索标准的表单，用户可以根据任一标准进行搜索。搜索结果可能有超过100条记录，我想在页面中显示（每页20条记录）。我正在使用Sencha Architect来开发代码。这是我的商店的样子： -

    Ext.define('EmpMain.store.EmpSearchStore', {
    extend: 'Ext.data.Store',

    requires: [
        'EmpMain.model.EmpSearcModel',
        'Ext.data.proxy.JsonP',
        'Ext.data.reader.Json'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            model: 'EmpMain.model.EmpSearcModel',
            storeId: 'EmpSearchStore',
            pageSize: 4,
            proxy: {
                type: 'jsonp',
                reader: {
                    type: 'json',
                    root: 'data',
                    totalProperty: 'totalRecords'
                }
            }
        }, cfg)]);
    }
});

以下是我的搜索按钮的处理程序代码： -

var values = this.up('#id_EmpSearchForm').getValues();
//console.log(Ext.JSON.encode(values));

var EmpsearchStore=Ext.getStore('EmpSearchStore'),
    EmpMemoryStore=Ext.getStore('EmpMemoryStore'),
    records=[];

this.up('#id_EmpSearch').setLoading(true);
console.log("No of records in store before"+EmpsearchStore.getCount());
.request({

     url: "http://localhost:19456",
    method:"POST",
    params : {
        EmpData:  Ext.JSON.encode(values)
    },
    scope : this,
    reader: {
        type: 'json',
        root: 'data',
        totalProperty: 'totalRecords'
    },
    //method to call when the request is successful

    success:function(response){

        response = Ext.decode(response.responseText);


        console.log("Total Records"+response.totalRecords);

        if(response.success){
            //Ext.MessageBox.alert('Success', response.message);

            this.up('#id_EmpSearch').setLoading(false);
            EmpsearchStore.loadData(response.data);
            console.log("No of records in store after"+EmpsearchStore.getCount());
            //copy data into memory store

            console.log("No of records in Memory store after"+EmpMemoryStore.getCount());
        }
        else {
            Ext.MessageBox.alert('Alert!!', response.message);
            this.up('#id_EmpSearch').setLoading(false);
        }
    },

    //method to call when the request is a failure
    failure:function(form, result){
        Ext.MessageBox.alert('Communication Error', 'Error loading data');
        this.up('#id_EmpSearch').setLoading(false);
    }


});

由于某些原因，分页不起作用。有人可以帮我吗？我究竟做错了什么 ？  这是我的JSOn响应

{
    "data": [{
        "Emp_ID": "1000451",
        "TPC_COND_ID": "35816",
        "TPC_CONDUIT_NAME": "TPC_JMS_ETM_ALL",
        "TPC_CHAN_ID": "35818",
        "TPC_CHANNEL_NAME": "TPC_JMS_ETM204_ALL",
        "ABC_SEND_ID": "65696",
        "ABC_SENDER": "0279639200002",

    },
    {
        "Emp_ID": "1002370",
        "TPC_COND_ID": "11098",
        "TPC_CONDUIT_NAME": "MQ_02",
        "TPC_CHAN_ID": "13148",
        "TPC_CHANNEL_NAME": "MQ_INBOUND_PASS_THRU",
        "ABC_SEND_ID": "39300",
        "ABC_SENDER": "FLNAHVL",

    }],
    "success": true,
    "totalRecords": 50
}

这是我的网格和工具栏配置

xtype: 'gridpanel',
                                    autoRender: true,
                                    height: 500,
                                    id: 'id_EmpResultGrid',
                                    autoScroll: true,
                                    header: false,
                                    title: 'Emp Search Results',
                                    scroll: 'vertical',
                                    store: 'EmpSearchStore',
                                    viewConfig: {
                                        preserveScrollOnRefresh: true,
                                        enableTextSelection: true
                                    },
                                    dockedItems: [
                                        {
                                            xtype: 'pagingtoolbar',
                                            dock: 'bottom',
                                            width: 360,
                                            displayInfo: true,
                                            store: 'TPPSearchStore'
                                        }
                                    ]