Ajouter filtrage dans une fride avec extjs4

salut,

je travail avec extjs4

j'arrive à afficher ma gride avec les bonnes données récupérés du ma base de donnée

mon but actuel est de savoir comment ajouter la notion de filtrage dans cette gride,
savoir s'il existe un plugin dans extjs4 offre cette possibilité de filtrage,

le filtrage consiste à ajouter un textfield au dessus de gride ou bien un composant spécifique au filtrage lié au gride,

et dans ce textfield ou bien dans le composant de recherche , choisir la colonne avec lequel on veut faire le filtrage , taper le text de recherche ( dans le textfield ou bien comme j'ai dis le composant spécifique de recherche s'il existe)

et donc la gride va afficher seulement les lignes correspond au critère de recherche,

mon code actuellement fonctionne sans le filtrage ( recherche)

le code js est :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
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();
}

le code java est :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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;
        }
 
}

merci d'avance