gird的底部分页工具栏下拉菜单，可以用下拉菜单选择每页显示多少条数据

最新推荐文章于 2020-08-19 23:00:28 发布

转载最新推荐文章于 2020-08-19 23:00:28 发布 · 3.1k 阅读

文章标签：

#工具 #function

本文介绍如何使用 ExtJS 框架定制分页组件，包括设置默认显示记录数、创建下拉框选择不同页面大小的功能，并实现相应数据加载。通过具体代码示例展示了如何在网格视图中应用这些定制化分页功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载自:http://babydeed.iteye.com/blog/584018

var pageSize = 30;//默认显示多少条记录

generatePagesize_combo = function(){ 
return new Ext.form.ComboBox({   
        store: new Ext.data.SimpleStore({ 
            fields: ['text', 'value'], 
            data: [['5', 5], ['10', 10], ['30', 30], ['40', 40], ['50', 50]] 
        }), 
        mode: 'local', 
        displayField: 'text', 
        valueField: 'value', 
        editable: false, 
        allowBlank: false, 
        triggerAction: 'all', 
        width: 60, 
        listeners:{ 
                'render':function(comboBox){ 
                                  comboBox.setValue(comboBox.ownerCt.pageSize);   //使得下拉菜单的默认值是初始值
                      }, 
               'select':function(comboBox){ 
                  var pSize = comboBox.getValue(); 
                  comboBox.ownerCt.pageSize = parseInt(pSize); //改变PagingToolbar的pageSize 值
                  comboBox.ownerCt.findParentByType("grid").store.reload({params:{start:0,limit:pSize}}); //重写加载store                   
 } 
        } 
    });   
} 

调用如下： 

var bbar = new Ext.PagingToolbar({ 
pageSize : pageSize, //必须在外面声明个pageSize的变量并赋予默认值
store : store, 
displayInfo : true, 
items:['-','每页',generatePagesize_combo(),'条'], 
displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条', 
emptyMsg : "没有记录" 
});