ext的store一段很牛B的思想,有关grid.getStore().filterBy

本文介绍如何利用ExtJS框架中的store离线过滤功能实现模糊查询,并展示了如何将此功能应用于GridPanel组件中,以支持根据编码、名称及时间等多个字段进行灵活的后台模糊搜索。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 众所周知,ext的store有个离线过滤功能,store的filter可支持模糊查询,大小写匹配等。

ext3.0api 

通过改装,可以把其运用到combox里,让combox支持真正的后台模糊查询,可按指定任意一个或多个字段和内容模糊查询。

如下和java的vo结合的代码:

略。。。待补

ext如此牛B,其实好戏还在后头。再看一段代码。


crTaskSearchGrid.initGrid_3 = function(){ 
   var colMap ={
      uuid:'technicianCd',
      columns:[
    {header: "disFlag",hidden:true,hideable:false,dataIndex: 'disFlag'},
    {header: "filter",hidden:true,hideable:false,dataIndex: 'filter'},//用于模糊查询过滤
    {header: "种植主体编号", width: 100, sortable: true, locked:false, dataIndex: 'collectObjectId',renderer:dis,summaryRenderer:function(){return '<b>合计</b>'}},
    {header: "种植主体名称", width: 100, sortable: true, locked:false, dataIndex: 'collectObjectName',renderer:dis},
    {header: "作业时间", width: 100, sortable: true, locked:false, dataIndex: 'wTime',renderer:Ext.util.Format.timeYmd}
    //{header: "深耕面积(亩)", width: 100, sortable: true, locked:false, dataIndex: 'deepPloughArea'},
    //{header: "机耕面积(亩)", width: 100, sortable: true, locked:false, dataIndex: 'machinePloughArea'}
   ]};
   addColumn(colMap);

   var cdTF = new Ext.form.TextField({anchor:'99%',emptyText:'输入编码,回车查询',width:110,listeners :{
        specialKey :function(field,e){
         if (e.getKey() == Ext.EventObject.ENTER) filter();
     }
 }});
   var nameTF = new Ext.form.TextField({anchor:'99%',emptyText:'输入名称,回车查询',width:110
    ,listeners :{
        specialKey :function(field,e){
         if (e.getKey() == Ext.EventObject.ENTER) filter();
     }
 }});
   var date = new Ext.form.DateField({id:'date',editable:false,fieldLabel:"时间",format:"Y-m-d"});
   
 var grid = crTaskSearchGrid.listGrid_3 = new Ext.grid.HsGridPanel({
     colMap: colMap,
     loadMask: {msg:'<fmt:message key="loadData.waitmsg"/>'},
     viewConfig: {
         forceFit:true
     },
     showRowNumber:true,
     border:false,
     hidden:true,
  autoScroll:true,
     dwrFun:crTaskSearchManager.getCrTaskSearchZzzt,
     showPagebar:false,
     summary:true,
     singleSelect :true,
     tbar:[
   {xtype:'button',id:'tbarStr',width:280,text:tbarStr},
        '->',"种植主体:",cdTF,'-',nameTF,'-',"时间:",date,'-',
        {xtype:'button',cls:'btn',id:'resetDate',width:40,text: '<font style="font-weight:bold">重置</font>',
         listeners:{click:function(){clearFilter()}}},'-',
        {xtype:'button',cls:'btn',width:40,text: '<font style="font-weight:bold">返回</font>',
        listeners:{click:function(){loadGrid_2()}}}
       ]
 });
 grid.store.sort('collectObjectId','ASC');

 Ext.getCmp('date').on('select',function(f,newv,oldv){
  filter();
 });
 
 /**
 * store离线模糊查询
 *  @author chenbf
 */
 function filter(){
  grid.getStore().filterBy(function(record) {
   var dTime = date.value==''?'':date.getValue().format('Y-m-d')+" 00:00:00";
   var dCd = cdTF.getValue();
   var dName = nameTF.getValue();

   var rTime = record.get('wTime').format('Y-m-d')+" 00:00:00";
   var rCd = record.get('collectObjectId');
   var rName = record.get('collectObjectName');
   //任何一个输入框,都有可能为空
   function A(){
    if(dCd!='')
       return rCd.indexOf(dCd)!=-1;
    return true;
   }
   function B(){
    if(dName!='')
       return rName.indexOf(dName)!=-1;
    return true;
   }
   function C(){
    if(dTime!='')
       return rTime.indexOf(dTime)!=-1;
    return true;
   }
   return A()&&B()&&C();
   });
 }
 function clearFilter(){
  grid.getStore().reload();
 }
}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值