EXTJSで検索フィルターを追加するには

Question

extjsを使用してテーブルを作成しました。ここには3つの列の名前、電子メール、および車があります。 extjsでは、デフォルトのソート方法を使用しています。ここでは、これらの3つの列の検索方法を追加して、名前、電子メール、および車を使用して検索することもできます。 私は以下のコードのために何をする必要がありますか？ 予想される出力は、各列の下に検索フィルタオプションを取得する必要があります。

Ext.define('ViewerModel', { 
    extend: 'Ext.app.ViewModel', 
    alias: 'viewmodel.viewermodel', 

    stores: { 

     mystore: { 

      fields: ['name', 'email', 'cars'], 
      data: { 
       'items': [{ 
        'name': 'Lisa', 
        "email": "lisa@simpsons.com" 
       }, { 
        'name': 'Bart', 
        "email": "bart@simpsons.com" 
       }, { 
        'name': 'Homer', 
        "email": "homer@simpsons.com" 
       }, { 
        'name': 'Marge', 
        "email": "marge@simpsons.com" 
       }] 
      }, 

      proxy: { 
       type: 'memory', 
       reader: { 
        type: 'json', 
        rootProperty: 'items' 
       } 
      } 
     } 

    } 
}); 

Ext.define('APP.HorizontalBox', { 
    extend: 'Ext.container.Container', 
    requires: ['Ext.layout.container.HBox'], 
    xtype: 'layout-horizontal-box', 
    width: 750, 
    height: 300, 
    layout: { 
     type: 'hbox', 
     align: 'stretch' 
    }, 
    bodyPadding: 10, 

    defaults: { 
     frame: true, 
     bodyPadding: 10 
    }, 
    viewModel: { 
     type: 'viewermodel' 
    }, 

    items: [{ 
     xtype: 'grid', 
     title: 'Grid: click on the grid rows', 
     itemId: 'myGridItemId', 
     flex: 1.2, 
     margin: '0 10 0 0', 
     bind: { 
      store: '{mystore}', 
      selection: '{users}' 
     }, 
     columns: [{ 
      text: 'Name', 
      dataIndex: 'name', 
      flex: 0.5 
     }, { 
      text: 'Email', 
      dataIndex: 'email', 
      flex: 1 
     }, { 
      text: 'Cars', 
      dataIndex: 'cars', 
      flex: 1 
     }], 

     dockedItems: [{ 
      xtype: 'toolbar', 
      dock: 'top', 
      items: [{ 
       xtype: 'button', 
       padding: '2 5 2 5', 
       text: 'Edit item', 
       handler: function (btn) { 
        var grid = btn.up('grid'); 
        var selectedRow = grid.getSelectionModel().getSelection()[0]; 
        var janela = Ext.create('APP.MyWindow', { 
         animateTarget: btn.getEl(), 
         //EDITED 
         viewModel: { 
          data: { 
           users: selectedRow 
          } 
         } 
        }).show(); 
       } 
      }] 
     }], 
    }, { 
     xtype: 'form', 
     title: 'View', 
     itemId: 'panelbindItemId', 
     flex: 1, 
     margin: '0 10 0 0', 
     defaults: { 
      labelWidth: 50 
     }, 
     items: [{ 
      xtype: 'displayfield', 
      margin: '20 0 0 0', 
      fieldLabel: 'Name', 
      bind: '{users.name}' 
     }, { 
      xtype: 'displayfield', 
      fieldLabel: 'Email', 
      bind: '{users.email}' 
     }] 
    }] 
}); 

Ext.define('APP.MyWindow', { 
    extend: 'Ext.window.Window', 
    alias: 'widget.mywindow', 

    reference: 'windowreference', 

    title: 'MyWindow | Edit record', 
    closable: true, 
    modal: true, 
    padding: '10px', 
    height: 150, 
    layout: 'fit', 

    initComponent: function() { 
     var me = this; 

     Ext.apply(me, { 

      items: [{ 
       xtype: 'form', 
       layout: 'anchor', 
       defaults: { 
        padding: '5 0 5 0' 
       }, 
       items: [{ 
        xtype: 'textfield', 
        margin: '10 0 0 0', 
        fieldLabel: 'Name', 
        bind: '{users.name}' 
       }, { 
        xtype: 'textfield', 
        fieldLabel: 'Email', 
        bind: '{users.email}' 
       }] 
      }] 
     }); 

     me.callParent(arguments); 

    } 
}); 

Ext.application({ 
    name: 'Fiddle', 
    launch: function() { 
     Ext.create('APP.HorizontalBox', { 
      renderTo: document.body, 
      width: 750, 
      height: 400, 
      title: 'Title' 
     }); 

    } 
}); 

Answer 1

このコードを使用して、日付を使用してデータを検索することもできます。

listeners: { 
       afterrender: function() { 
        var menu = Ext.ComponentQuery.query('grid')[0].headerCt.getMenu(); 
        menu.add([{ 
      xtype:'datefield', 
      name:'date1', 
      fieldLabel:'Filter By', 
      format: 'y-m-d', 
      listeners:{ 
       renderer: Ext.util.Format.dateRenderer('y-m-d'), 
         field:{ xtype:'datefield', 
           autoSync:true, 
           allowBlank:false, 
           editor: new Ext.form.DateField(
             {format: 'y-m-d'}) } 
      } 
     } 

Answer 2

あなたは（このpostを参照してください。）グリッドのafterrenderイベントでそれを行うことができますたとえば：

listeners: { 
       afterrender: function() { 
        var menu = Ext.ComponentQuery.query('grid')[0].headerCt.getMenu(); 
        menu.add([{ 
         text: 'Search', 
         iconCls: 'x-fa fa-home', 
         handler: function() { 
          console.log("Search Item"); 
         } 
        }]); 
       } 
      } 

このFiddleをチェックしてください。あなたが探しているものを

Answer 3

はFiltersFeatureで、次のように使用方法は次のとおりです。

xtype:'grid', 
... 
features:[{ 
    ftype: 'filters', 
    local: true, 
    filters: [{ 
     type: 'string', 
     dataIndex: 'name' 
    }, { 
     ... (one definition for every column you want to allow filtering one) 
    }] 
}] 

あなたはrequiresとmaybe even load Ext.ux, as can be found in the last commentを追加する必要がありますのでご注意ください。 他の読者は、FiltersFeatureはExtJS4固有であり、has been moved around for ExtJS 5 and 6であることに注意してください。