Javascript ExtJS4.2中的网格分页

Javascript ExtJS4.2中的网格分页,javascript,extjs,pagination,sencha-architect,Javascript,Extjs,Pagination,Sencha Architect,我正在开发一个ExtJS应用程序,需要实现分页。所以我有一个表单,它有大约10-15个搜索条件,用户可以根据这两个条件中的任何一个进行搜索。搜索结果可能有100多条记录,我希望以页面形式显示(每页20条记录)。我正在使用Sencha Architect来开发代码。以下是我的店铺的外观:- Ext.define('EmpMain.store.EmpSearchStore', { extend: 'Ext.data.Store', requires: [ '

我正在开发一个ExtJS应用程序,需要实现分页。所以我有一个表单,它有大约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'
                                        }
                                    ]

“怎么”不起作用?您应该提供以下几个细节:1.)网格是否加载了数据?2.)如果是,是您期望的数据吗?3.)您的JSONP响应是什么样子的?4.)您的回复中记录的数量是否正确?5.)您的回复是否具有商店可用于了解如何分页的总结果大小?6.)根据您所说的,您的“页面大小”是错误的…当前为“4”,但如果您希望页面数为20,则应为20。请记住:您应全权负责为存储提供正确的数据。商店对你的远程数据毫无头绪,所以你让它做什么它就做什么。如果您没有在每个“页面”返回正确的记录集,网格存储区只能处理您告诉它的任何数据。99%的人的远程分页问题与他们的Ext JS配置无关,而是与没有从服务器正确返回数据有关。要回答第一个问题,分页不起作用。网格正在加载记录,服务器也正在返回totalRecords。我已经在问题中添加了我的JSON响应,但它“如何”不起作用?不归还记录?返回相同的记录?抛出错误?分页工具栏中的箭头不起作用。(它们被禁用)同时显示已加载的0条记录(共0条记录)