Добавить фильтр в сетку Extjs

Question

Я хочу добавить некоторые фильтры в свою сетку, когда я нажал кнопку фильтра (см. Ниже). Фильтры должны быть добавлены к сетке с заданными значениями из формы фильтра.

На этой странице будет заполнено текстовое поле, и когда я нажму кнопку фильтра, обработчик onFilterClick вызовет FilterController.

Ext.define('path.to.filterPanel', { 
extend: 'Ext.form.Panel', 

xtype: 'filter', 
controller: 'dashboard-filter', 

viewModel: { 
    type: 'dashboard-filter' 
}, 

frame: false, 
bodyPadding: 10, 
layout: 'form', 

// the fields 
items: [{ 
    xtype: 'textfield', 
    name: 'firstName', 
    id: 'firstName', 
    fieldLabel: 'Firstname' 
}, { 
    xtype: 'textfield', 
    name: 'lastName', 
    id: 'lastName', 
    fieldLabel: 'Lastname' 
}], 

buttons: [ 
    text : 'Filter', 
    handler: 'onFilterClick' // trigger to the controller 
}] 
}); 

При нажатии на кнопку фильтра значения будут выведены на этот контроллер.

Ext.define('path.to.FilterController', { 
extend: 'Ext.app.ViewController', 
alias: 'controller.dashboard-filter', 

onFilterClick: function(button) { 

    var form = button.up('form').getForm(); 

    if (form.isValid()) { 
     // form valid 

     var firstName = Ext.getCmp("firstName").getValue(); 
     var lastName = Ext.getCmp("lastName").getValue(); 

     // check if there is some input 
     if (!!employeeNumber || !!firstName || !!lastName) { 


      // add filters but how?? 


     } 
    } else { 
     // form not valid 
     console.log("not valid"); 
    } 
} 
}); 

И наконец, это файл сетки, в который должны быть добавлены фильтры.

Ext.define('path.to.gridPanel, { 
extend: 'Ext.grid.Panel', 

requires: [ 
    'Ext.grid.column.Action', 
    'App.store.Employees' 
], 

controller: 'dashboard-gridVieuw', 
xtype: 'gridVieuw', 
store: 'Employees', 

stateful: true, 
collapsible: true, 
multiSelect: true, 

stateId: 'gridController', 

initComponent: function() { 
    this.store = new App.store.Employees(); 
    var me = this; 

    me.columns = [{ 
     header : 'Firstname', 
     flex  : 1, 
     sortable : true, 
     dataIndex: 'firstName' 
    }, { 
     header : 'Lastname', 
     flex  : 1, 
     sortable : true, 
     dataIndex: 'lastName' 
    }] 

me.callParent(); 
} 
}); 

Я использую версию 5 экз.

Answer 1

Вы можете использовать метод filterBy, чтобы отфильтровать нижележащие store, связанные с grid. Вот пример:

Ext.getStore('myStore').filterBy(function(record, id) { 
      if (record.get('firstName') === firstName) { 
       return true; 
      } else { 
       return false; 
      } 
     }); 

Вот такой fiddle demonstrating a working example of a filter

Answer 2

Спасибо за ответ на мой вопрос. Меня устраивает. Я добавил в контроллер следующий обработчик OnClick.

onFilterClick: function(button) { 

    var form = button.up('form').getForm(); 

    if (form.isValid()) { 

     var fieldOne = Ext.getCmp("fieldOne").getValue(); 
     var fieldTwo = Ext.getCmp("fieldTwo").getValue(); 

     // check if there is some input 
     if (!!fieldOne || !!fieldTwo) { 

      // get store 
      var store = Ext.data.StoreManager.lookup('store'); 

      // check if store not empty 
      if(!Ext.isEmpty(store)){ 
       // clear filters and add a few new filters if params not empty 
       store.clearFilter(true); 

       if (!Ext.isEmpty(fieldOne)) { 
        store.filter("fieldOne", fieldOne) 
       } 

       if (!Ext.isEmpty(fieldTwo)) { 
        store.filter("fieldTwo", fieldTwo) 
       } 

       // count the filtered rows 
       var count = store.snapshot ? store.snapshot.length : store.getCount(); 

       if (count == 0) { 
        alert("No data found!"); 
        store.clearFilter();  
       } 
      } else{ 
       //Store empty 
       console.warn("Store's empty"); 
      } 
     } else { 
      // no values 
      alert("No entered data!"); 
     } 
    } else { 
     // form not valid 
     alert("Form not valid!"); 
    } 
}