Ext4 pagingtoolbar刷新按钮事件重写

extjs4 pagingtoolbar refresh button 扩展

 

最近在使用extjs4做项目，当用到pagingtoolbar的刷新按钮时出现了一个问题，当时的界面使用的是条件查询，当时不点击查询按钮，直接点击pagingtoolbar刷新按钮时，所设置的参数pageSize : 10并没有传入，刷新仍然执行默认的参数1-25，刷新时操作其实执行的是store.reload();

Extjs代码  
这个是我的代码

            dockedItems : [{
                    xtype : 'pagingtoolbar',
                    dock : 'bottom',
                    store : this.store,
                    displayInfo : true,
                    displayMsg : '显示单位信息 {0} - {1} of {2}',
                    emptyMsg : "没有单位信息",
                    pageSize : 10,
                    plugins : [{
                        ptype : 'pagingtoolbarresizer',
                        displayText: '每页件数',
                        options : [5, 10, 15, 20, 25]
                    }]
                }]

其中一种解决方案是：刷新按钮隐藏起来，用户看不到，就不会点击

Extjs代码  

1. var length = panel.dockedItems.keys.length;  
2. var refreshStr= "";  
3. for (var i = 0; i < length; i++) {  
4.     if (panel.dockedItems.keys[i].indexOf("pagingtoolbar") !== -1) {  
5.          refreshStr= panel.dockedItems.keys[i];  
6.     }  
7. }  
8. panel.dockedItems.get(refreshStr).child('#refresh').hide(true);  

第二种方法是重写刷新事件，这样可以从根本上解决这个问题

Extjs代码  

        var grid = this.getAcceptajcxlb();
        var length = grid.dockedItems.keys.length;
        var refreshStr= "";
        for (var i = 0; i < length; i++) {
           if (grid.dockedItems.keys[i].indexOf("pagingtoolbar") !== -1) {
              refreshStr= grid.dockedItems.keys[i];
           }
        }
        grid.dockedItems.get(refreshStr).child('#refresh').setHandler(  
        function() { 
                grid.getStore().pageSize = grid .down('pagingtoolbar').pageSize;
                grid.getStore().currentPage = 1;
                grid.getStore().load();
         })
这些代码的大致意思就是获取到你的grid，通过grid寻找pagingtoolbar的参数值pageSize，把它传递给store，进行加载数据
本文原出自http://31212.iteye.com/blog/1165653，感谢该网友的分享，在此基础上我根据自己的需求做了一些修改，在此分享出来，希望可以给遇到同样问题的人给予帮助