Ext.grid 分页

2020-03-13 17:03:28 阅读：256 来源： 互联网

标签：分页 comboBox 条数 Ext grid var 每页 itemsPage

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

标签：分页,comboBox,条数,Ext,grid,var,每页,itemsPage
来源： https://www.cnblogs.com/2625664742-chanyk/p/12487535.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Ext.grid 分页