Ext.grid 分页

Posted 2021-03-06 2625664742-chanyk

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);
                    oStore.reload();
                }
            }
        });

4. grid显示的分页信息

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 可直接将用数字替换掉。