Extjs 使用pagingToolbar实现gridpanel数据分页

效果展现

版本4.2

bbar : [{
                id : "pagingToolbar",
                border : 0,
                xtype : "pagingtoolbar",
                store : store
            }, "-", {
                xtype : "displayfield",
                value : myproject.Message.Each_page_show
            }, {
                id : "comboCountPerPage",
                xtype : "combobox",
                editable : false,
                width : 60,
                store : Ext.create("Ext.data.ArrayStore", {
                    fields : ["text"],
                    data : [["20"], ["50"], ["100"],
                        ["300"], ["1000"]]
                }),
                value : 20,
                listeners : {
                    change : {
                        fn : function() {
                            store.pageSize = Ext
                                .getCmp("comboCountPerPage")
                                .getValue();
                            store.currentPage = 1;
                            Ext.getCmp("pagingToolbar")
                                .doRefresh();
                        },
                        scope : me
                    }
                }
            }, {
                xtype : "displayfield",
                value : myproject.Message.Item_Record
            }],

以上是整个grid表下面的分页导航,其中有combobox这个组件,用来选择每页展示的数据,
其实pagingToolbar和gridpanel通过store进行关联

我们看一下store的代码:

var store = Ext.create("Ext.data.Store", {
            autoLoad : false,
            model : modelName,
            data : [],
            pageSize : 20,
            proxy : {
                type : "ajax",
                actionMethods : {
                    read : "POST"
                },
                url : me.URL("Home/Logistics/queryAllData"),
                reader : {
                    type : 'json',
                    root : 'queryAllData',
                    //必须有,pagingtoobar会根据这个totalProperty属性进行分页的计算,但是我们在进行数据库查找的时候一定要给totalcount全部数据的数目
                    totalProperty : 'totalCount'
                }
            }
        });

        store.on("beforeload", function() {
        //获取额外的参数,自己根据需求
            store.proxy.extraParams = me.getQueryParam();
        });
        store.on("load", function(e, records, successful) {
            if (successful) {

            }
        });

关于totalProperty : ‘totalCount’的获取:

$sql1 = "select count(*) as cnt from XXX";
        $data1 = $db->query($sql1);
        //查找的结果就是我们此数据表的全部数据条数,
        $cnt = $data1[0]["cnt"];

        return [
        //$data是我们查找的数据,根据前面设定limit为20,故是一页的数据
            "queryAllData" => $data,
            "totalCount" => $cnt
        ];

在store.on load的时候我们不需要传递start和limit,因为前面创建store的时候已经指定pageSize : 20,