2013-08-24 5 views
1

Я работаю с extjs4,фильтра того же столбец в сетке в ExtJS 4

Я хочу, чтобы добавить фильтр в моей сетке (фильтр по данным в строке или столбце)

В настоящее время я могу Disply моей сетки с данными извлекаются из из базы данных,

это мой код:

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(); 
} 

мой 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; 
     } 

} 

, как я уже сказал, я могу показать мой drid с правильными данными,

теперь я хочу, чтобы добавить текстовое поле над моей сетки для того, чтобы ввести те же данные для фильтрации моей сетки в соответствии с данными, введенными в текстовое поле

Я думаю, что ExtJS предлагает возможность сделать фильтр в сетке, но я не могу найти решение в этом контексте

моей цели, если это возможно с плагин в ExtJS, чтобы выбрать в текстовом поле или в других composant связанных к фильтру, чтобы выбрать тот столбец, который мы хотим сделать фильтром, и ввести те же данные в textfiled to f inish this filter

ответ

0

Вы можете добавить панель инструментов, содержащую текстовое поле, с пустым текстом, обозначающим критерии фильтра, а при изменении текста сетка будет отфильтрована. Это код:

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 
           } ]); 
          } 
         } 
        } 
        ] 
       } 
       ] 
2

Есть несколько различных типов решений:

1) в раскрывающемся меню каждого заголовка, вы можете добавить нефильтруемое текстовое поле, которое будет только фильтровать это поле в магазине :

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

2) в раскрывающемся меню каждого заголовка, вы можете добавить список доступных значений с флажками, которые будут фильтровать магазин:

... 
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) вы можете добавить текстовое поле на панели инструментов, а также прослушивать события изменения (как описано Aminesrine)

Смежные вопросы