10 Gitterfilter mit Textfeld extjs

Question

Hilft mir jemand? Ich habe ein Raster erstellt und Filter auf einem äußeren Textfeld hinzugefügt, auf einem Filter, den es ausführt, aber wenn ich Textfeld hinzufüge, wird es nicht ausgeführt, wenn das erste Textfeld unscharf ist, wird der Filter nicht ausgeführt. unten ist mein Code:

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 
       }], 
     }] 
}); 

Mit freundlichen Grüßen

Answer 1

In der filterGrid Funktion können Sie alle Filter räumen grid.store.clearFilter(); und anschließend einen einzelnen Filter für die Eigenschaft zu schaffen, die das Textfeld entspricht, das geändert wurde. Dies bedeutet, dass zu jedem Zeitpunkt nur ein einzelner Filter auf den Store angewendet wird.

Eine Möglichkeit, dies zu erreichen, wäre, nur den Filter zu entfernen, der für eine bestimmte Eigenschaft angewendet wurde, anstatt alle Filter zu löschen. Dann können Sie einen Filter für die geänderte Eigenschaft hinzufügen (oder erneut hinzufügen). Um dies zu tun, müssen Sie die Filter identifizieren. Beispiel: grid.store.filters.getAt(grid.store.filters.length-1).property=property; würde jeden Filter mit dem Namen der Eigenschaft kennzeichnen, mit der er erstellt wurde. Dies würde ermöglichen, die spezifischen Filter entfernen mit

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

und fügen Sie dann die Filter

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

Siehe Geige mit hier: https://fiddle.sencha.com/#fiddle/1k74