如何对 ext.js 网格中新添加的记录应用过滤器？

Question

在 ext.js 网格中，我正在创建一个过滤器，之后我在网格中动态添加新记录。过滤器不适用于新添加的记录。

重现步骤：

转到jsfiddle sample（等待几秒钟加载）

Ext.Loader.setPath('Ext.ux', 'http://cdn.sencha.io/ext-4.2.0-gpl/examples/ux');
Ext.require('Ext.ux.grid.FiltersFeature');
Ext.onReady(function() {

var gstore = {
    fields: ['a', 'b', 'c']
    ,autoLoad: true
    ,proxy: {
        type: 'memory'
        ,reader: 'array'
        ,data: [
            ['Foo', 1, 'Bar']
            ,['Bar', 2, 'Baz']
            ,['Baz', 1, 'Bar']
            ,['Bat', 2, 'Baz']
        ]
    }
};

Ext.widget('grid', {
    renderTo: Ext.getBody()

    ,height: 400

    ,features: [{
        ftype: 'filters'
        ,local: true
    }]

    ,columns: [{
        dataIndex: 'a'
        ,text: 'Column A'
        ,filter: {
            type: 'list'
            ,options: ['Foo', 'Bar']
        }
    },{
        dataIndex: 'b'
        ,text: 'Column B'
    },{
        dataIndex: 'c'
        ,text: 'Column C',
        filter: {
            // required configs
            type: 'string',
            // optional configs
            value: '',  // setting a value makes the filter active.
            itemDefaults: {
                // any Ext.form.field.Text configs accepted
            }
        }
    }]

    ,store: gstore

    ,tbar: [
      {
          text: 'Add new row'
          ,handler: function() {
              var grid = this.up('grid');            
              var newRecord = {'a': 'some', 'b': 'thing', 'c': 'else'};
              console.log(grid.getStore());
              grid.getStore().insert(0, newRecord);
          }
      }
    ]
});
}); // onReady

将鼠标悬停在列 "Column C" 上。
点击下拉那个出现在列旁边，转到过滤器并键入 "Test"，然后按回车键。
不会显示任何记录。现在点击“添加新的 row”按钮，会新增一条记录，并显示该条记录即使不满足过滤条件。

Answer 1

当您添加新记录时，过滤器将不会适用于它，除非您重新应用它们。您可以重新加载过滤器，以便在将其插入商店后将其应用于新添加的记录。

handler: function() {
   var grid = this.up('grid');            
   var newRecord = {'a': 'some', 'b': 'thing', 'c': 'else'};
   console.log(grid.getStore());
   grid.getStore().insert(0, newRecord);
   grid.filters.reload(); //Reloading the grid filters
}

如何对 ext.js 网格中新添加的记录应用过滤器？

How to apply filter for newly added record in ext.js grid?

extjs

extjs4.2