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参数效果相同。