filter same column in grid in extjs 4

Question

I work with extjs4,

I want to add a filter in my grid ( filter by data in row or column)

Currently I can disply my grid with data retrieved from from database ,

this my code :

    Ext.define('DataEmployeeList', {
          extend: 'Ext.data.Model',
          fields: [
           {name: 'id_emplyee', type: 'string'},
           {name: 'firstname', type: 'string'},
           {name: 'lastname', type: 'string'} ,
           {name: 'work', type: 'string'}   

          ]
        });

 var DataEmployeeListGridStore = Ext.create('Ext.data.Store', {
           model: 'DataEmployeeList'
     });


 var DataEmployeeListGrid1 = Ext.create('Ext.grid.Panel', {
      id:'DataEmployeeListGrid',
      store: DataEmployeeListGridStore,
       collapsible:true,
      columns: 
      [
       {xtype: 'checkcolumn', header:'display data', dataIndex: 'checked',  width: 60,listeners:{'checkchange': requestGridSelectionChanged}},
       {text: 'رق', flex: 1, sortable: true, hidden:true, dataIndex: 'id_employee'},
       {text: 'firsname', flex: 1, sortable: true, dataIndex: 'firstname'},
       {text: 'lastname', flex: 1, sortable: true, dataIndex: 'lastname'},
       {text: 'work', flex: 1, sortable: true,   dataIndex: 'work'}

      ],        
      columnLines: true,
      anchor: '100%',
      height: 250,
      frame: true,
      margin: '0 5 5 5', 
     });



 function fillEmployeeList()
 {
    employeeService.findAllEmployee({
        callback:function(list)
        {
            DataEmployeeListGridStore.removeAll();
            if (list!=null)
            {               
                for(var i=0; i<list.length; i++)
                {           

                    var id=list[i].idEmployee;
                    var firstN=list[i].firstname;                   
                    var lastN=list[i].lastname;
                    var workEmp= list[i].work;

                    DataEmployeeListGridStore.add({id_employee:id, firstname:firstN, lastname :lastN, workEmp : work});
                }
            }
        }
    });
} 


Ext.onReady(function() {
fillEmployeeList();
}

my employeeService.java :

public class employeesService{

 public List<employees> getEmployeesListByLibelle() {
            // TODO Auto-generated method stub

            Query query = getSession().createQuery("FROM employees");  

            List result = query.list();
            if(result.size()!=0 && result !=null)
                return result;
            else 
                return null;
        }

}

as I already said I can display my drid with the correct data ,

now I want to add a textfield above my grid in order to enter same data to filter my grid according to data entered in the textfield

I think that extjs offers the possibility to do a filter in the grid but i can't find any solution in this context

my goal if it's possible with plugin in extjs to select in textfield or in another composant related to the filter to select which column we want to do the filter and entered same data in textfiled to finish this filter

Answer 1

There are a few different types of solutions:

1) in the dropdown of each header, you can add a filterable text field that will only filter that field in the store:

...
requires: ['Ext.ux.grid.FiltersFeature'],
...
columns:[
   { header: 'text', dataIndex: 'value', filterable: true }
],
...
features: [
    { ftype: 'filters' }
],
...

2) in the dropdown of each header, you can add a list of available values with checkboxes that will filter the store:

...
requires: ['Ext.ux.grid.FiltersFeature'],
...
columns:[
   { header: 'text', dataIndex: 'value', 
     filterable: true, 
     filter: {
        type: 'list',
        store: Ext.data.StoreManager.lookup('myStore'),                       
        dataIndex: 'value',                        
     }
   }
],
...
features: [
    { ftype: 'filters', local: true }
],
...

3) you can add a text field to a toolbar, and listen for the change event (as described by Aminesrine)

Answer 2

You can add a toolbar containing a textfield with an empty text indicating the filter criteria, and on text change, the grid will be filtered. This is the code:

dockedItems: [{
                    xtype: 'toolbar',
                    flex: 1,
                    dock: 'top',
                    items: [
                    {
                        xtype: 'textfield',
                        emptyText: 'Enter Name',
                        fieldStyle: 'text-align: left;',
                        width: 150,
                        id:'NameSearch',
                        listeners: {
                            scope : this,
                            change : function(field, newValue, oldValue, options) {
                                Ext.getCmp('yourGridId').store.clearFilter();
                                Ext.getCmp('yourGridId').store.filter([{
                                    property: 'Name',
                                    anyMatch: true,
                                    value   : newValue
                                } ]);
                            }
                        }
                    }
                    ]
                }
                ]

Answer 3

Ext.form.field.Trigger helps us in filtering each column in a better way. Please find the url below : ExtJs - Filter a grid with a search field in the column header - this is a nice solution