store前台数据过滤

最近由于客户需要对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,忽略此配置。