关于Ext grid带搜索分页值得注意的一个问题

       Ext grid 分页在项目中是经常的需求，关于如何分页及传递参数相信做过的同学都很清楚，不过，对于带搜索的分页问题，如果不注意，将会产生很奇怪的现象。

       例如，在一个grid里，初始渲染后，总共5页数据，每页10条数据，假设，有一条关于张三的数据在第一页，这时，在搜索栏里输入张三的条件，将很容易查到。另一方面，有些同学喜欢“不走寻常路”，喜欢随意翻页查看，当页数太多，数据很多时，可能没找到，这时他/她在搜索栏输入张三的条件，发现查不到数据了……先上图，大家就明白了：

 这里假设查询lujian，在用户名输入栏输入:'lujian',点击查找按钮，将看到如下所示结果：

 很顺利的查到了想要的结果，不过，如果你不小心，一下翻到其他页，然后再查（这里假设只有这一条记录），假设你翻到了第三页，如图所示：

 很不幸，你可能得到如下结果：

 debug时，发现传递的参数都对，按理说，不应该查不到，到底什么地方出了问题呢？这个问题我也debug了很久，发现是查询时，传递的分页参数start问题，原来当在第一页查询时，start是0，当翻到其他页时，这时start不再是0，如果要查找的记录在start之前，这时就查不到了。后来看了一下Ext官方的一个例子，Ext3.4版本的链接是：http://dev.sencha.com/deploy/ext-3.4.0/examples/form/custom-access.html，里面引用了一个文件：SearchField.js，里面有一段代码是这样的：

onTrigger2Click : function(){
        var v = this.getRawValue();
        if(v.length < 1){
            this.onTrigger1Click();
            return;
        }
        var o = {start: 0};
        this.store.baseParams = this.store.baseParams || {};
        this.store.baseParams[this.paramName] = v;
        this.store.reload({params:o});
        this.hasSearch = true;
        this.triggers[0].show();
    }

 请仔细关注上面代码中的start参数，以及 baseParams参数，这里将start重置为0，也就是说，当搜索时，是要从第一页开始的，这就是为什么上面查不到结果的原因。多说一句，这里是使用reload加载，reload 里使用的参数是lastOptions，当然也可以注册beforeload事件，在其中将start参数传递过去。在Ext4中，该段代码已改变：

onTrigger2Click : function(){
        var me = this,
            store = me.store,
            proxy = store.getProxy(),
            value = me.getValue();
        if (value.length > 0) {
            // Param name is ignored here since we use custom encoding in the proxy.
            // id is used by the Store to replace any previous filter
            me.store.filter({
                id: me.paramName,
                property: me.paramName,
                value: value
            });
            me.hasSearch = true;
            me.triggerCell.item(0).setDisplayed(true);
            me.updateLayout();
        }
    }

 可以看到，在这里是配置了一个filter参数过滤，如果不用这种方式，可以配置extraParams参数，该参数和Ext4之前版本的baseParams参数效果相同。