Discussion :

[franco9]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 java :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[sekaijin]

voici un example basé sur le tuto MCV de sencha
la vue

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
Ext.define('Transco.view.centrecout.List' ,{
    extend: 'Ext.grid.Panel',
    alias: 'widget.centrecoutlist',
    requires: ['Ext.ux.grid.FiltersFeature'],
 
    title: 'Centres Coûts',
 
    store: 'CentreCout',
 
    features: [{
        ftype: 'filters',
        encode: 'json',
        local: false
    }],
 
    dockedItems: [{
        xtype: 'pagingtoolbar',
        dock: 'bottom',
        displayInfo: true
    }],
 
    initComponent: function() {
        this.dockedItems[0].store = this.store;
 
        this.columns = [
            {header: 'Division',       filterable: true, flex: 1, dataIndex: 'division},
            {header: 'Pole',           filterable: true, flex: 1, dataIndex: 'pole},
            {header: 'UG Sirius',      filterable: true, flex: 1, dataIndex: 'ug'},
            {header: 'centre de coût', filterable: true, flex: 2, dataIndex: 'centre'},
            {header: 'Début',          filterable: true, flex: 1, dataIndex: 'debut', xtype: 'datecolumn',   format:'d/m/Y'},
            {header: 'Fin',            filterable: true, flex: 1, dataIndex: 'fin', xtype: 'datecolumn',   format:'d/m/Y'}
        ];
 
        this.callParent(arguments);
    }
});

Le point important est features.
il suffit ensuite d'ajouter filterable sur les champs
le type de la colonne défini la façon dont le filtre sera afficher.
pour une colonne string un champs de saisie
pour un number trois champs <, =, ou >
pour une date trois sélecteurs de date avant egal après
pour un bouléen deux choix
il est possible de définir un filtre avec une liste de valeur.

dans la doc chercher Ext.ux.Filters

A+JYT