Ext.ux.grid.FilterBar plugin

[zlevardy]

Hi,

not found how to get the FilterBar being rendered with the filter fields, when added to the grid. Each column is set with size (not flex). To get working the showHide() button must clicked twice! It gives the idea, that the component itself is about being rendered, but unfortunately not.

Another issue I have, how can I set one of the filter columns a default value? Or this set a column filter to mandatory, and load another filter's combo?

Trying to add to ext 4 project.

thank for any hint,
Zol

[zlevardy]

Let me answer my question as found the correct "workaround". The underneath store must have the filters set, and that's it. Cheers.

[Druid33]

Hi,

version for ext6 with some bugs fixed is available here: https://github.com/Druid33/ext6-grid-filterbar

you can look at it on sencha fiddle too: https://fiddle.sencha.com/#view/editor&fiddle/1v2n

the biggest change is, that all filter data are stored on grid insteed of plugin. So you can use this plugin with more rendered grid, not only with one.

[Druid33]

Hi,

some "feature" was added by my new coleague (https://github.com/weroro-sk). Text filter by default ignore accent characters now. You can use allowAccent: true config on field filter config to enable filtering by accent cahracters. Like this:

{
text: 'User name',
dataIndex: 'userName',
filter: {
type: 'string',
allowAccent: true
}
},


you can download plugin here: https://github.com/Druid33/ext6-grid-filterbar.

[zlevardy]

Hi,

any idea, how I can catch an event on a filter has been changed? For example filter is a combobox, and once it has its value, then I would like to set other filters, or stores.

thx

[milestonebass]

Hi,

any idea, how I can catch an event on a filter has been changed? For example filter is a combobox, and once it has its value, then I would like to set other filters, or stores.

thx

We've made quite a few customisations to the original class. Here is the init method for our custom class:
You would be interested in change listener in the filter configuration - I hold a reference to the owning grid and fire a notification event from the owning grid when such changes happen:

/**
     * Init function
     * This function is called when the plugin is invoked by the Owner component
     *
     * @param   {Ext.grid.Panel}    grid
     */
    init: function (grid) {


        var me = this,
                columns = grid.columns;
        me.ownerGrid = grid;
        me.ownerGrid.on('filterdata', me.manualApplyFilters, me);
        me.ownerGrid.on('resetfilter', me.manualClearFilters, me);
        me.extraSearchField = grid.query('[extraSearchField=true]');
        grid.on('afterrender', function (grid) {


            Ext.Array.each(columns, function (column) {


                var filter = {};
                if (!column[me.activateKey]) {
                    return true;
                }


                if (!column.items)
                    Ext.apply(column, {items: []});
                if (Ext.isEmpty(column.filter.xtype)) {


                    Ext.apply(filter, {
                        xtype: 'textfield'
                    });
                } else if (column.filter.xtype == 'datefield') {
                    Ext.apply(filter, {
                        formatText: null,
                        invalidText: '{0} is not a valid date - it must be in the format DD-Mon-YYYY'
                    });
                }


                Ext.apply(filter, column.filter, {
                    height: 22,
                    width: '100%',
                    enableKeyEvents: true,
                    isFilterField: true,
                    triggers: {
                        clear: {
                            cls: 'x-form-clear-trigger',
                            hidden: true,
                            handler: function () {
                                this.setValue(null);
                                this.triggers.clear.el.hide();
                                if (typeof this.clearValue === 'function')
                                    this.clearValue();
                            }
                        }
                    }
                });


                if (me.enterKeySearch) {


                    //user has specified filtering be executed on ENTER key
                    Ext.apply(filter, {
                        listeners: {
                            keypress: function (field, e) {
                                //either ENTER key
                                if (e.event.keyCode == 13) {
                                    me.manualApplyFilters();
                                    me.ownerGrid.fireEvent('filtersapplied');
                                }
                            },
                            change: function (field, newVal) {
                                if (Ext.isEmpty(newVal)) {
                                    field.triggers.clear.el.hide();
                                } else {
                                    field.triggers.clear.el.show();
                                }
                                if (field.xtype == 'combo' && !Ext.isEmpty(field.reloadDataOnChange)
                                        && field.reloadDataOnChange == true && !Ext.isEmpty(field.getValue())) {
                                    me.manualApplyFilters();
                                    me.ownerGrid.fireEvent('filtersapplied');
                                }
                            }
                        }
                    });
                } else {
                    //user has specified immediate filtering
                    Ext.apply(filter, {
                        enableKeyEvents: false,
                        listeners: {
                            change: function (field, e) {
                                var fn = (Ext.isEmpty(field.getValue())) ? me.clearFilter : me.applyFilter;
                                me._task.delay(me.delay, fn, me, [field]);
                            }
                        }
                    });
                }


                //so that a column reference can be reached via a filter
                filter.column = column;
                var createdFilter = Ext.ComponentManager.create(filter);
                //so that a filter reference can be reached via a column
                column.filter = createdFilter;
                var visibleContainer = Ext.create('Ext.container.Container', {
                    //added so the field has access to the parent viewModel
                    viewModel: grid.lookupViewModel(),
                    isFilterField: true,
                    height: 28,
                    width: '100%',
                    padding: '0 5px',
                    listeners: {
                        scope: me,
                        element: 'el',
                        mousedown: function (e) {
                            e.stopPropagation();
                        },
                        click: function (e) {
                            e.stopPropagation();
                        },
                        dblclick: function (e) {
                            e.stopPropagation();
                        },
                        keydown: function (e) {
                            e.stopPropagation();
                        },
                        keypress: function (e) {
                            e.stopPropagation();
                        },
                        keyup: function (e) {
                            e.stopPropagation();
                        }
                    }
                });
                //add fields to array so that when a search occurs all fields can be read
                me.fields.push(createdFilter);
                //render container in column
                visibleContainer.render(column.getEl());
                //add created filter to previously created and rendered column
                visibleContainer.add(createdFilter);
            }, me);
        }, me);
    }