在extjs 4中过滤网格中的同一列答案

【问题标题】：filter same column in grid in extjs 4在extjs 4中过滤网格中的同一列
【发布时间】：2014-05-24 02:53:54
【问题描述】：

我使用 extjs4，

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

目前我可以使用从数据库中检索到的数据来显示我的网格，

这是我的代码：

    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 中的插件在文本字段或与过滤器相关的另一个组合中选择我们要进行过滤的列并在文本文件中输入相同的数据以完成此过滤器，我的目标

【问题讨论】：

标签： extjs4

【解决方案1】：

有几种不同类型的解决方案：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：