Page 23 of 23 FirstFirst ... 13212223
Results 221 to 226 of 226

Thread: Ext.ux.grid.FilterBar plugin

  1. #221
    Ext GWT Premium Member
    Join Date
    Oct 2009
    Posts
    142

    Default default settings

    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

  2. #222
    Ext GWT Premium Member
    Join Date
    Oct 2009
    Posts
    142

    Default

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

  3. #223
    Sencha Premium Member
    Join Date
    Dec 2012
    Posts
    4

    Default

    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.

  4. #224
    Sencha Premium Member
    Join Date
    Dec 2012
    Posts
    4

    Default

    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.

  5. #225
    Ext GWT Premium Member
    Join Date
    Oct 2009
    Posts
    142

    Default

    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

  6. #226
    Sencha Premium Member milestonebass's Avatar
    Join Date
    Dec 2009
    Location
    Melbourne, Australia
    Posts
    28

    Lightbulb

    Quote Originally Posted by zlevardy View Post
    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:

    Code:
    /**
         * 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);
        }

Page 23 of 23 FirstFirst ... 13212223

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •