EXTJS에서 검색 필터를 추가하는 방법

Question

extjs를 사용하여 테이블을 만들었습니다. 여기에는 세 개의 열, 전자 메일 및 자동차이 있습니다. extjs에는 기본 정렬 방법이 있습니다. 여기에 나는이 세 열 모두에 대한 검색 방법을 추가하여 이름, 전자 메일 및 자동차를 사용하여 검색 할 수도 있습니다. 아래 코드에서 어떤 변경이 필요합니까? 예상되는 출력은 각 열 아래에서 검색 필터 옵션을 가져와야합니다.

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

당신은 예를 들어 그리드의 afterrender 이벤트 (.이 post을 참조)에서 수행 할 수 있습니다

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이라는 점에 유의하십시오.