为 ext1.1 的 gird 添加自定义每页记录条数功能.顺便show一下我们在开发的项目....

最新推荐文章于 2022-01-13 16:19:46 发布

最新推荐文章于 2022-01-13 16:19:46 发布 · 238 阅读

文章标签：

#EXT

记录专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何在ExtJS项目中实现Grid视图每页显示记录数的自定义功能，通过添加下拉菜单供用户选择不同的记录数，并在选择后触发数据重新加载。

现在同事们要求能自定义Grid中每页记录条数功能,由于项目一开始采用ext1.1,而只有ext2.0才PageSizePlugin,网上搜了一下没找着,只好自己动手了.

1.在分页工具栏(Ext.PagingToolba)上添加一个下拉菜单(Ext.form.ComboBox),选择每页记录条数.


//創建分頁數目的數據
        var pageSizeStore = new Ext.data.SimpleStore({
            fields: ['pageSizeValue','pageSizeItem'],
            data : [[5,5],[10,10],[15,15],[20,20],[50,50]]
        });

//创建选择每页数目的combox
   var cmPageSize = new Ext.form.ComboBox({
            store: pageSizeStore,
            displayField:'pageSizeItem',
            valueField:'pageSizeValue',
            typeAhead: true,
            mode: 'local',
            triggerAction: 'all',
            emptyText:'10',
            width:40,
            selectOnFocus:true
        });
//创建分页工具栏
var paging = new Ext.PagingToolbar(gridFoot, ds, {
            pageSize: myPageSize,
            displayInfo: true,
            displayMsg: '共{2} 條結果. 當前 {0} - {1}',
            emptyMsg: "0個結果"
        });
//把cmPageSize添加到分页工具栏
        paging.add('-','每頁',cmPageSize,'條記錄');

2.为cmPageSize的change事件添加响应代码,设置paging的pageSize值,让dataStore重新加载.




 cmPageSize.on('change',function(e){
           var   myPageSize =e.getValue();
            paging.pageSize=myPageSize;
            ds.load({params:{start:0,limit:myPageSize}}); //ds为gird的dataStore
        });

搞掂~ ^_^