Сетка фильтра с текстовым полем 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