1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    2
    Vote Rating
    1
    nobbler is on a distinguished road

      1  

    Default Using Ext.ux.grid.FiltersFeature with Grouped Headers

    Using Ext.ux.grid.FiltersFeature with Grouped Headers


    Hi,

    got a hint for anybody who wants to use the new? grouped headers (example) together with the filtersFeature (of course not using the filter on the group headers) on ExtJs 4.1 with ux from examples.
    In the source ux.grid.FiltersFeature.js its quoted:
    // filters may be configured through the plugin,
    // or in the column definition within the headers configuration
    But with grouped headers for me applying the filters to the single columns config as mainly used in the grid filter example (example) did not work (the menus were not showing the filter option). So do not:
    Code:
    //columns
    var columns = [{text: 'groupedHeader', columns: [{.., filter: {type: ..., ...}}, ...]],...},...];
    
    //define filter
    var filtersCfg = {
                ftype: 'filters',
                autoReload: false, //don't reload automatically
                local: true //only filter locally
    };
    
    grid = Ext.create('Ext.grid.Panel', {
                ...,
                columns:    columns,
                features:    [filtersCfg]
    });
    Do instead configure through the plugin
    Code:
    //define filter
    var filtersCfg = {
                ftype: 'filters',
                autoReload: false, //don't reload automatically
                local: true, //only filter locally
                // filters may be configured through the plugin,
                // or in the column definition within the headers configuration
                filters: [{type: ...., ....}, ...]
            };
    Then for me they are displayed correctly.

    Cheers

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,988
    Vote Rating
    455
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Thanks for the code. I am sure someone will fine this useful.

    Scott.

  3. #3
    Sencha User mono blaine's Avatar
    Join Date
    Jul 2008
    Location
    Turkey
    Posts
    123
    Vote Rating
    8
    mono blaine will become famous soon enough

      2  

    Default


    The method createFilters of Ext.ux.grid.FiltersFeature could be changed a little in order to take grouped headers into account:

    Code:
    /**
     * @private Create the Filter objects for the current configuration, destroying any existing ones first.
     */
    createFilters: function () {
        var me = this,
            hadFilters = me.filters.getCount(),
            grid = me.getGridPanel(),
            filters = me.createFiltersCollection(),
            model = grid.store.model,
            fields = model.prototype.fields,
            field,
            filter,
            state;
    
        if(hadFilters) {
            state = {};
            me.saveState(null, state);
        }
    
        function add(dataIndex, config, filterable) {
            if(dataIndex && (filterable || config)) {
                field = fields.get(dataIndex);
                filter = {
                    dataIndex: dataIndex,
                    type: (field && field.type && field.type.type) || 'auto'
                };
    
                if(Ext.isObject(config)) {
                    Ext.apply(filter, config);
                }
    
                filters.replace(filter);
            }
        }
    
        // We start with filters from our config
        Ext.Array.each(me.filterConfigs, function (filterConfig) {
            add(filterConfig.dataIndex, filterConfig);
        });
    
        // Then we merge on filters from the columns in the grid. The columns' filters take precedence.
         //Ext.Array.each(grid.columns, function (column) {
             //if(column.filterable === false) {
                 //filters.removeAtKey(column.dataIndex);
             //} else {
                 //add(column.dataIndex, column.filter, column.filterable);
             //}
         //});
    
        function traverseColumns(columns) {
            // Then we merge on filters from the columns in the grid. The columns' filters take precedence.
            Ext.Array.each(columns, function (column) {
                if(column.items.length > 0) {
                    traverseColumns(column.items.items);
                } else {
                    if(column.filterable === false) {
                        filters.removeAtKey(column.dataIndex);
                    } else {
                        add(column.dataIndex, column.filter, column.filterable);
                    }
                }
            });
        }
    
        traverseColumns(grid.columns);
    
        me.removeAll();
        if(filters.items) {
            me.initializeFilters(filters.items);
        }
    
        if(hadFilters) {
            me.applyState(null, state);
        }
    }

  4. #4
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Montréal, Canada
    Posts
    220
    Vote Rating
    5
    Christiand is on a distinguished road

      0  

    Default


    +1 to add this suggestion. works like a charm!

  5. #5
    Sencha User
    Join Date
    Aug 2012
    Location
    India
    Posts
    13
    Vote Rating
    1
    bhavana is on a distinguished road

      0  

    Default


    Cheers[/QUOTE]
    #nobbler, thanks for the code, it worked for me.... Yupieee....

  6. #6
    Sencha User
    Join Date
    Aug 2012
    Location
    India
    Posts
    13
    Vote Rating
    1
    bhavana is on a distinguished road

      0  

    Default Grouped headers - Filters

    Grouped headers - Filters


    Hello,

    When I used to use filter for grid, css class .ux-filtered-column used get append dynamically.
    However, for grouped headers filters this class is not getting appended .

    Below is the code for customization

    .ux-filtered-column {
    background-color:#E4EFFC;
    background-image: url('../icons/fam/filter.png') !important;
    background-repeat:no-repeat !important;
    background-position:85% 20% !important;
    color: green !important;
    }



    Am unable to customize the grouped header now....

  7. #7
    Sencha User
    Join Date
    Aug 2012
    Location
    India
    Posts
    13
    Vote Rating
    1
    bhavana is on a distinguished road

      0  

    Default


    Still waiting for update

  8. #8
    Sencha User
    Join Date
    Oct 2010
    Posts
    7
    Vote Rating
    0
    cojack is on a distinguished road

      0  

    Default


    There is also needed a modify the method updateColumnHeadings to:

    Code:
        updateColumnHeadings : function (items) {
            var me = this,
                headerCt = items || me.view.headerCt;
            if (headerCt) {
                headerCt.items.each(function(header) {
                    if(header.isGroupHeader && header.items.length > 0) {
                        me.updateColumnHeadings(header);
                    } else {
                        var filter = me.getFilter(header.dataIndex);
                        header[filter && filter.active ? 'addCls' : 'removeCls'](me.filterCls);
                    }
                });
            }
        },
    This modify will change the column to filtered if some filter is added.

    Regads.

  9. #9
    Sencha User
    Join Date
    Nov 2013
    Posts
    1
    Vote Rating
    0
    sagioto is on a distinguished road

      0  

    Default


    How can I use this functionality by extending the FiltersFeature class?
    Can I tell filtersCfg to work with the extension class?