Comment ajouter le filtre de recherche dans EXTJS

Question

J'ai créé une table en utilisant extjs où il a trois colonnes nom, email et voitures. Dans extjs nous avons une méthode de tri par défaut. ici je veux ajouter la méthode de recherche pour toutes ces trois colonnes afin que je puisse également rechercher en utilisant le nom, l'email et les voitures. Quels changements je dois faire pour le code ci-dessous La sortie attendue est que j'ai besoin d'obtenir l'option de filtre de recherche sous chaque colonne.

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

Vous pouvez également utiliser ce code pour rechercher les données à l'aide de la date.

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

Vous pouvez le faire en cas afterrender de la grille (voir ce post.) Par exemple:

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

Cocher cette Fiddle.

Answer 3

Ce que vous recherchez est le FiltersFeature et l'utilisation est la suivante:

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

S'il vous plaît noter que vous devez ajouter un requires et maybe even load Ext.ux, as can be found in the last comment. Autres lecteurs s'il vous plaît être conscient que FiltersFeature est ExtJS4 spécifique, et has been moved around for ExtJS 5 and 6.