1

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

4

3 回答 3

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

于 2013-09-04T20:49:47.677 回答
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
                                } ]);
                            }
                        }
                    }
                    ]
                }
                ]
于 2013-09-02T09:29:45.047 回答
0

Ext.form.field.Trigger 帮助我们以更好的方式过滤每一列。请在下面找到 url： ExtJs - 在列标题中使用搜索字段过滤网格- 这是一个不错的解决方案

于 2014-05-23T18:53:54.417 回答