Filter grid data using the selected value in the combo box

Question

I have a grid and a combo box in the panel. I tried to filter the data in the grid based on the selection made in the combo box. I am using ExtJS 4.2.1

Suppose I have a grid with the following data:

When choosing a specific value in the combo box, I want the table to display only those values.

if "aaa" is selected, then I want it to display as:

First I load the grid data from the database using a php file.

Any help would be greatly appreciated :)

PS: I do not want the data to be loaded every time I select an item with a list. I just want it to be filtered.

Answer 1

First you need a combo box that also allows you to clean the filter. Thus, you will need a second button in the combo box to clear the filter. You don’t have to do a lot for this, because the infrastructure already covers such a function, even if it is not documented.

Here's an older version, but it should still work on 4.2

Ext.define('Ext.ux.form.field.FilterCombo', { extend: 'Ext.form.field.ComboBox', alias: 'widget.filtercombo', /** * @cfg {string} recordField * @required * The fieldname of the record that contains the filtervalue */ /** * @cfg {string} searchField * @required * The fieldname on which the filter should be applied */ /** * @cfg {boolean} clearable * Indicates if the clear trigger should be hidden. Defaults to <tt>true</tt>. */ clearable: true, initComponent: function () { var me = this; // never submit it me.submitValue = false; if (me.clearable) me.trigger2Cls = 'x-form-clear-trigger'; else delete me.onTrigger2Click; me.addEvents( /** * @event clear * * @param {Ext.ux.form.field.FilterCombo} FilterCombo The filtercombo that triggered the event */ 'clear', /** * @event beforefilter * * @param {Ext.ux.form.field.FilterCombo} FilterCombo The filtercombo that triggered the event * @param {String/Number/Boolean/Float/Date} value The value to filter by * @param {string} field The field to filter on */ 'beforefilter' ); me.callParent(arguments); // fetch the id the save way var ident = me.getId(); me.on('select', function (me, rec) { var value = rec[0].data[me.recordField], field = me.searchField; me.fireEvent('beforefilter', me, value, field) me.onShowClearTrigger(true); me.onSearch(value, field); }, me); me.on('afterrender', function () { me.onShowClearTrigger(); }, me); }, /** * @abstract onSearch * running a search on the store that may be removed separately * @param {String/Number/Boolean/Float/Date} val The value to search for * @param {String} field The name of the Field to search on */ onSearch: Ext.emptyFn, /** * @abstract onFilterRemove * removing filters from the the * @param {Boolean} silent Identifies if the filter should be removed without reloading the store */ onClear: Ext.emptyFn, onShowClearTrigger: function (show) { var me = this; if (!me.clearable) return; show = (Ext.isBoolean(show)) ? show : false; if (show) { me.triggerEl.each(function (el, c, i) { if (i === 1) { el.setWidth(el.originWidth, false); el.setVisible(true); me.active = true; } }); } else { me.triggerEl.each(function (el, c, i) { if (i === 1) { el.originWidth = el.getWidth(); el.setWidth(0, false); el.setVisible(false); me.active = false; } }); } // Version specific methods if (Ext.lastRegisteredVersion.shortVersion > 407) { me.updateLayout(); } else { me.updateEditState(); } }, /** * @override onTrigger2Click * eventhandler */ onTrigger2Click: function (args) { this.clear(); }, /** * @private clear * clears the current search */ clear: function () { var me = this; if (!me.clearable) return; me.onClear(false); me.clearValue(); me.onShowClearTrigger(false); me.fireEvent('clear', me); } }); 

Now that you have a combo that fires events for the filter and clears, you need to implement it. To do this, you need to know that there are no mesh filters or loading progress, this is a store. By default, storage is configured using

 remoteSort: false, remoteFilter: false, remoteGroup: false 

So here is an example implementation

 { xtype: 'filtercombo', id: 'iccombo', store: Ext.StoreMgr.lookup('Combostore'), fieldLabel: 'Short State', displayField: 'States', valueField: 'States', typeAhead: true, triggerAction: 'all', queryMode: 'remote', name: 'State', labelWidth: 125, anchor: '95%', recordField: 'ComboStoreFieldName', searchField: 'GridStoreFieldName', clearable: false, onSearch: function (me, value, field) { // You many also use component query to access your grid and call getStore() var store = Ext.StoreMgr.lookup('YourStoreIdName'); // Clear existing filters if (store.isFiltered()) { store.clearFilter(false); } // Build filter // Apply filter to store store.filter(field,value); } } 

Answer 2

when changing the combobox value, you can use the storage filtering method that you used in the grid.

 store.clearFIlter(); store.filter('name', valueOfCombobox); 

Answer 3

If you want to replace the filter of a list of grid columns with multi-select compilation, use the code below ...

  /** * Filter by a configurable app.view.common.tag.Tag * <p><b><u>Example Usage:</u></b></p> * <pre><code> var filters = Ext.create('Ext.ux.grid.GridFilters', { ... filters: [{ // required configs type : 'combofilter', dataIndex : 'myName', options : ['aa','bb'] // optional configs allowBlank: false, //default is true fieldLabel: "Tag(s)" ... }] }); * </code></pre> */ Ext.define('Ext.ux.grid.filter.ComboFilter', { extend: 'Ext.ux.grid.filter.Filter', alias: 'gridfilter.combofilter', /** * @cfg {String} iconCls * The iconCls to be applied to the menu item. * Defaults to <tt>'ux-gridfilter-text-icon'</tt>. */ iconCls : 'ux-gridfilter-text-icon', emptyText: 'Enter Filter Text...', selectOnFocus: true, width: 125, /** * @private * Template method that is to initialize the filter and install required menu items. */ init : function (config) { Ext.applyIf(config, { allowBlank: true, queryMode: 'local', displayField : 'name', valueField : 'id', store: (config.options == null ? [] : config.options), multiSelect: true, typeAhead: true, itemId: 'valuesSelect', emptyText : 'Select', labelWidth: 29, fieldLabel: '', width: 300, listeners: { scope: this, //keyup: this.onInputKeyUp, el: { click: function(e) { e.stopPropagation(); if (e.updateTask !== undefined) { e.updateTask.delay(this.updateBuffer); } } }, change: this.changeSelection } }); this.inputItem = Ext.create('app.view.common.tag.Tag', config); this.menu.add(this.inputItem); this.menu.showSeparator = false; this.updateTask = Ext.create('Ext.util.DelayedTask', this.fireUpdate, this); }, /** * @private * Template method that is to get and return the value of the filter. * @return {String} The value of this filter */ getValue : function () { return this.inputItem.getValue(); }, /** * @private * Template method that is to set the value of the filter. * @param {Object} value The value to set the filter */ setValue : function (value) { this.inputItem.setValue(value); this.fireEvent('update', this); }, /** * Template method that is to return <tt>true</tt> if the filter * has enough configuration information to be activated. * @return {Boolean} */ isActivatable : function () { return this.inputItem.getValue().length > 0; }, /** * @private * Template method that is to get and return serialized filter data for * transmission to the server. * @return {Object/Array} An object or collection of objects containing * key value pairs representing the current configuration of the filter. */ getSerialArgs : function () { return {type: 'list', value: this.getValue()}; }, /** * Template method that is to validate the provided Ext.data.Record * against the filters configuration. * @param {Ext.data.Record} record The record to validate * @return {Boolean} true if the record is valid within the bounds * of the filter, false otherwise. */ validateRecord : function (record) { var val = record.get(this.dataIndex); if(typeof val != 'list') { return (this.getValue().length === 0); } return val.toLowerCase().indexOf(this.getValue().toLowerCase()) > -1; }, changeSelection: function(field, newValue, oldValue) { if (this.updateTask !== undefined) { this.updateTask.delay(this.updateBuffer); } } }); 

Please use the ExtJs tag plugin and you need to add the ComboFilter file to FiltersFeature. as...

  Ext.define('Ext.ux.grid.FiltersFeature', { extend: 'Ext.grid.feature.Feature', alias: 'feature.filters', uses: [ 'Ext.ux.grid.menu.ListMenu', 'Ext.ux.grid.menu.RangeMenu', 'Ext.ux.grid.filter.BooleanFilter', 'Ext.ux.grid.filter.DateFilter', 'Ext.ux.grid.filter.DateTimeFilter', 'Ext.ux.grid.filter.ListFilter', 'Ext.ux.grid.filter.NumericFilter', 'Ext.ux.grid.filter.StringFilter', 'Ext.ux.grid.filter.ComboFilter' ], 

Looks like...

enter image description here