帶文本框的網格過濾器extjs

Question

有人幫助我嗎？我已經創建了一個網格，並在外部文本框上添加了濾鏡，在其運行的一個濾鏡上，但是當我添加文本框時，它不會運行，當第一個文本框模糊時，濾鏡不會運行。波紋管是我的代碼：

filterGrid = function (property, value) { 
    var grid = Ext.getCmp('grid'); 
    grid.store.clearFilter(); 
    if (value) { 
     var matcher = new RegExp(Ext.String.escapeRegex(value), "i"); 
     grid.store.filter({ 
      filterFn: function (record) { 
       return matcher.test(record.get(property)); 
      } 
     }); 
    } 
}; 

var grid = new Ext.Panel({ 
    layout: 'border', 
    renderTo: Ext.getBody(), 
    height: 500, 
    items: [{ 
      xtype: 'form', 
      region: 'north', 
      id: 'formPanel', 
      bodyPadding: 10, 
      height: 75, 
      collapsible: true, 
      layout: 'hbox', 
      items: [{ 
        xtype: 'textfield', 
        fieldLabel: 'Name', 
        labelAlign: 'right', 
        id: 'name', 
        listeners: { 
         change: function (field, value) { 
          filterGrid('name', value); 
         } 
        } 
       }, { 
        xtype: 'textfield', 
        fieldLabel: 'Email', 
        labelAlign: 'right', 
        id: 'email', 
        listeners: { 
         change: function (field, value) { 
          filterGrid('email', value); 
         } 
        } 
       }, { 
        xtype: 'textfield', 
        fieldLabel: 'Phone', 
        labelAlign: 'right', 
        id: 'phone', 
        listeners: { 
         change: function (field, value) { 
          filterGrid('phone', value); 
         } 
        } 
       }, { 
        xtype: 'textfield', 
        fieldLabel: 'Type', 
        labelAlign: 'right', 
        id: 'type', 
        listeners: { 
         change: function (field, value) { 
          filterGrid('type', value); 
         } 
        } 
       }] 
     }, 
     { 
      xtype: 'grid', 
      region: 'center', 
      searchValue: null, 
      matches: [], 
      currentIndex: null, 
      searchRegExp: null, 
      caseSensitive: false, 
      regExpMode: false, 
      matchCls: 'x-livesearch-match', 
      defaultStatusText: 'Nothing Found', 
      id: 'grid', 
      store: { 
       fields: ['name', 'email', 'phone', 'type'], 
       data: [{ 
         name: 'Homer', 
         email: 'homer@simpsons.com', 
         phone: '111-222-333', 
         type: 'Foo' 
        }, { 
         name: 'Marge', 
         email: 'marge@simpsons.com', 
         phone: '111-222-334', 
         type: 'Foo' 
        }, { 
         name: 'Bart', 
         email: 'bart@simpsons.com', 
         phone: '111-221-335', 
         type: 'Bar' 
        }, { 
         name: 'Lisa', 
         email: 'lisa@simpsons.com', 
         phone: '111-221-336', 
         type: 'Bar' 
        }] 
      }, 
      columnLines: true, 
      columns: [{ 
        text: 'Name', 
        dataIndex: 'name', 
        flex: 1 
       }, { 
        text: 'Email', 
        dataIndex: 'email', 
        flex: 1 
       }, { 
        text: 'Phone', 
        dataIndex: 'phone', 
        flex: 1 
       }, { 
        text: 'Type', 
        dataIndex: 'type', 
        flex: 1 
       }], 
     }] 
}); 

親切的問候

Answer 1

在filterGrid功能，您使用的grid.store.clearFilter();清除所有過濾器，然後創建對應於該改變文本字段屬性一個過濾器。這意味着在任何時候只有一個過濾器應用於商店。解決這個

一種方法是刪除只應用於特定屬性，而不是清除所有過濾器的過濾器。然後，您可以添加（或重新添加）已更改屬性的過濾器。要做到這一點，你需要確定過濾器。例如：grid.store.filters.getAt(grid.store.filters.length-1).property=property;會爲每個過濾器添加用於創建它的屬性的名稱。這將使你使用

grid.store.filters.each(function(item) { 
    if (item.property === property) { 
     grid.store.removeFilter(item); 
    } 
}) 

刪除特定的過濾器，然後添加使用

grid.store.addFilter({ 
    filterFn: function (record) { 
     return matcher.test(record.get(property)); 
    } 
}); 

見小提琴這裏的過濾器：https://fiddle.sencha.com/#fiddle/1k74