滤波器同一列的ExtJS的4

Question

我extjs4工作，

我想在我的网格中添加一个过滤器（由行或列的数据过滤器）

目前我可以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相关过滤器来选择我们想要做的过滤器列，并输入相同的数据在文本文件到f此款过滤器

Answer 1

您可以添加一个包含文本框的工具栏，其中包含一个空文本，指示过滤条件，在文本更改时，网格将被过滤。这是代码：

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 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描述）

Answer 3

Ext.form.field.Trigger帮助我们以更好的方式过滤每一列。请找到下面的网址： ExtJs - Filter a grid with a search field in the column header - 这是一个不错的解决方案