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},也可以将页码设置成其他数字,看个人需求。

 

posted on 2020-03-13 16:59  欲穷  阅读(315)  评论(0编辑  收藏  举报