最近由于客户需要对grid进行大量的检索操作,而现有的grid数据是以分页的形式从数据库端获取,每次检索都需要重新进行获取,效率很低.
因而将数据进行一次加载,每次的检索操作在前台extjs进行过滤,效果就能得到很大的提升.(节约了每次与服务器的交互时间,但数据渲染所消耗时间无法缩短,因浏览器而议)
首先根据需求将grid的store改为加载全部数据
var testItemStore = new Ext.data.JsonStore({
root:'datas',
//不分页,总数据量可以不要
//totalProperty:'sum',
url:'<%=basePath%>item/testItem!getList.action',
idProperty:'id',
fields:[{name:'id'},{name:'businessType'},{name:'businessTypeCode'},{name:'itemDesc'},
{name:'unit'},{name:'unitCode'},{name:'charge'},{name:'oftenGroup'},
{name:'oftenGroupCode'},{name:'note'},{name:'sum'},{name:'subtotal'},
{name:'briefCode'},{name:'code'}]
});
testItemStore.load();
在grid的tbar中添加检索框,我这里需要的是根据store中briefCode信息进行检索
var select_id = {
xtype:'textfield',
width:120,
emptyText:'简码',
inputType:'text',
invalidText:'error',
id:'select_testItem_briefCode',
//开启键盘监听
enableKeyEvents:true,
listeners:{
//键盘按键监听
keyup:function(field, e){
var data = field.getValue();
//store的过滤
testItemStore.filter('briefCode',data,true,false);
}
}
};
Store中filter(String|Array field, String|RegExp value, [Boolean anyMatch], [Boolean caseSensitive], [Boolean exactMatch])
根据指定的参数过滤records。可以选择传递一个过滤选项数组，根据多个参数过滤。
单个过滤器示例:store.filter('name', 'Ed', true, true); //查找所有records中name包含'Ed'子串的记录
//anyMatch可选,默认为true,caseSensitive可选,默认为true
多个过滤器示例:store.filter([{property:'name',value:'Ed',anyMatch:true,caseSensitive:true},{fn:function(record){return record.get('age') == 24},scope: this}]);
参数
field:String|Array
你的数据记录的一个属性,或者一个包含多个过滤条件的数组
value:String/RegExp
要么是一个属性名的起始字符串,么是一个需要在属性上进行测试的 正则表达式
anyMatch:Boolean
(可选)true时将全字匹配,而不仅仅是匹配起始字符串
caseSensitive:Boolean
(可选)true比较时将会对大小写敏感
exactMatch:Boolean
true将会强制精确匹配(在正则中添加^和$字符).默认为fales.如果anyMatch参数为true,忽略此配置。