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 に答える