Question

我使用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中的插件在文本字段中选择或在与过滤器相关的其他合成中选择我们想要进行过滤的列，并在textfiled中输入相同的数据来完成此过滤器

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

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

Answer 3

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

在extjs 4中过滤网格中的相同列

3 个答案: