extjs localFilter联合grid分页条使用时遇到的一个问题

 今天，我们在使用extjs时候遇到了一个问题：

问题再现：

根据客户的需求，我们需要在portlet首部做一个分页的grid,当然了，下面有一个分页条，然后我们需要当点击分页条的时候，会像服务器端发一个ajax请求来获取当前页的所有记录。然后我们在顶部点Filter组合框时候要基于这个局部的结果集做过滤。我们分页条是很正确和完美的，比如一共有400多条记录，分在21页中，每页显示20条记录，然后我们的过滤条件选择的是Status字段为“Submitted & Pending for Approval的条件”，在第一页时候，一切正常，第二页的时候，因为第二页的局部结果集(20条记录）通过过滤条件之后筛选下来的结果条数为0 ，结果它吧整个下方的分页条都冻结了。如下图所示：

原因分析：

为了找到原因为什么分页条被冻结，我们就必须找到这段执行代码， 很显然，无论是点击“左","右”或者“刷新” 箭头，都会去触发onload方法：

  
  


   
   
onLoad : function(){  

   
   
var me = this,  

   
   
pageData,  

   
   
currPage,  

   
   
pageCount,  

   
   
afterText,  

   
   
count,  

   
   
isEmpty;  

   
   
count = me.store.getCount();  

   
   
isEmpty = count === 0;  

   
   
if (!isEmpty) {  

   
   
pageData = me.getPageData();  

   
   
currPage = pageData.currentPage;  

   
   
pageCount = pageData.pageCount;  

   
   
afterText = Ext.String.format(me.afterPageText, isNaN(pageCount) ? 1 : pageCount);  

   
   
} else {  

   
   
currPage = 0;  

   
   
pageCount = 0;  

   
   
afterText = Ext.String.format(me.afterPageText, 0);  

   
   
}  

   
   
Ext.suspendLayouts();  

   
   
me.child('#afterTextItem').setText(afterText);  

   
   
me.child('#inputItem').setDisabled(isEmpty).setValue(currPage);  

   
   
me.child('#first').setDisabled(currPage === 1 || isEmpty);  

   
   
me.child('#prev').setDisabled(currPage === 1 || isEmpty);  

   
   
me.child('#next').setDisabled(currPage === pageCount || isEmpty);  

   
   
me.child('#last').setDisabled(currPage === pageCount || isEmpty);  

   
   
me.child('#refresh').enable();  

   
   
me.updateInfo();  

   
   
Ext.resumeLayouts(true);  

   
   
if (me.rendered) {  

   
   
me.fireEvent('change', me, pageData);  

   
   
}  

   
   
},  
  
  

如果是正常的情况，就是过滤之后store不为空的话，那么第10行isEmpty会返回false,于是会执行第11-20行，所以一切会正常显示的，但是如果过滤子结果集之后为空的话，那么第10行isEmpty会返回true,所以会执行第16-19行，吧这些相关的数字重置，然后接着执行第22行，这里会吧 afterTextItem的文本设为刚才在15行的 "of 0",然后在第23行，会吧输入框中的值设为0（因为第17行） ，然后把这个输入框给禁用掉，因为isEmpty为true,所以setDisabled(true),这就是为什么我们会出现整个BBar被禁用的情况。

解决方法：

只要重写下change 方法就可以了