1. 定义变量,存储,每页显示多少条数据
var itemsPage = 25;
2.grid数据源
//列表源 var oStore = Ext.create('Ext.data.Store', { fields: ["a","b","c","d"], autoLoad: false, pageSize: itemsPage, //记录每页显示多少条数据,会作为url的参数传递 proxy: { type: "ajax", url: "...",
extraParams:{}, //自定义url参数 reader: { type: 'json', root: "rows", totalProperty: 'total' } //totalProperty: 总数据条数 } });
注意:获取到的数据源,格式为{total:123,rows:[......]}
3. 每页显示的条数,设为可选 //每頁顯示的條數
//每頁顯示的條數 var pagesizeCombo = new Ext.form.ComboBox({ store: new Ext.data.SimpleStore({ fields: ['id', 'value'], data: [['25', 25], ['75', 75], ['100', 100], ['150', 150], ['200', 200], ['300', 300]] }), mode: 'local', displayField: 'id', valueField: 'value', width: 60, editable: false, listeners: { render: function (comboBox) { //使得下拉菜单的默认值是初始值 comboBox.setValue(comboBox.ownerCt.getStore().pageSize); }, select: function (comboBox) { var pSize = comboBox.getValue(); comboBox.ownerCt.getStore().pageSize = parseInt(pSize); //存储改变后的,每页显示条数 itemsPage = parseInt(pSize); //重置頁碼 Ext.getCmp(gridId).getStore().currentPage = 1; //查詢加載數據 oStore.reload(); } } });
4. grid显示的分页信息,给grid添加属性bbar
bbar: [{ xtype: 'pagingtoolbar', dock: 'bottom', store: oStore, displayInfo: true, autoScroll: true, beforePageText: "第", afterPageText: "页 共 {0} 页", displayMsg: "显示 {0} - {1}条,共 {2} 条"), emptyMsg: "没有数据!"), items: ['-', "每页", pagesizeCombo, "条"] }]
5. 如果是每页固定显示数据条数,可省略步骤1和3,其它步骤中出现的 itemsPage 和 pagesizeCombo 可直接将用数字替换掉。
6. 数据重新加载(或按条件重新查询数据),可以给url重新设定参数
oStore.reload({ params: { page: 1,a2:"xxx" } }
7. 设置页码可以
Ext.getCmp(gridId).getStore().currentPage = 1;
也可以在reload中设置参数 {page:1},也可以将页码设置成其他数字,看个人需求。