Extjs 6 - 与组合框过滤网格

Question

我想用我的网格与组合框排序，我希望当我选择组合框上的值时，网格的内容改变，例如type任何人都可以帮助我吗？感谢

这个我的代码片段：

Ext.create('Ext.grid.Panel', { 
    height: 400, 
    title: 'Simpsons', 
    store: pagingStore, 
    columns: [{ 
      text: 'Name', 
      dataIndex: 'name' 
     }, { 
      text: 'Email', 
      dataIndex: 'email' 
     }, { 
      text: 'Phone', 
      dataIndex: 'phone' 
     }, 
     { 
      text: 'Type', 
      dataIndex: 'type' 
     }], 
    bbar: { 
     xtype: 'pagingtoolbar', 
     store: pagingStore, 
     displayInfo: true, 
     items: [ 
      '-', { 
       xtype: 'combo', 
       fieldLabel: 'List account', 
       labelAlign: 'right', 
       store: storeCombo, 
       displayField: 'name' 
      }] 
    }, 
    renderTo: Ext.getBody() 
}); 

Answer 1

你可能想是这样的：

Ext.create('Ext.grid.Panel', { 
    height: 400, 
    title: 'Simpsons', 
    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-222-335', 
      type: 'Bar' 
     }, { 
      name: 'Lisa', 
      email: 'lisa@simpsons.com', 
      phone: '111-222-336', 
      type: 'Bar' 
     }] 
    }, 
    columns: [{ 
     text: 'Name', 
     dataIndex: 'name' 
    }, { 
     text: 'Email', 
     dataIndex: 'email' 
    }, { 
     text: 'Phone', 
     dataIndex: 'phone' 
    }, { 
     text: 'Type', 
     dataIndex: 'type' 
    }], 
    bbar: { 
     xtype: 'toolbar', 
     items: [ 
      '-', { 
       xtype: 'combo', 
       fieldLabel: 'List account', 
       labelAlign: 'right', 
       forceSelection: true, 
       emptyText: '-- Select --', 
       store: { 
        fields: ['type'], 
        data: [{ 
         type: 'Foo' 
        }, { 
         type: 'Bar' 
        }] 
       }, 
       displayField: 'type', 
       valueField: 'type', 
       listeners: { 
        change: function(combo, value) { 
         var grid = this.up('grid'), 
          store = grid.getStore(); 

         if (!value) { 
          store.getFilters().removeAll(); 
         } else { 
          store.filter([{ 
           property: 'type', 
           value: value 
          }]); 
         } 
        } 
       } 
      } 
     ] 
    }, 
    renderTo: Ext.getBody() 
}); 

https://fiddle.sencha.com/#fiddle/1hn4