This issue duplicates another issue.
  1. #1
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    285
    Vote Rating
    20
    jhoweaa will become famous soon enough jhoweaa will become famous soon enough

      1  

    Default Filter Feature doesn't work with Grouped Columns

    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.1.3

    Description:
    • If a grid is using a grouping column header, the filter feature doesn't work. The menu associated with a filterable column does not show the Filter option.

    Steps to reproduce the problem:
    • Create a simple grid with a grouped column header.
    • Add the 'filters' feature to the Grid
    • Enable a filter on one or more columns in the grid

    The result that was expected:
    • The column(s) with filter specifications should have a 'Filter' menu associated with the colum header.

    The result that occurs instead:
    • No filter option exists

    Test Case:

    This test case uses a modified grid-filter-local.js file found in the 4.1.3 distribution. The changes were to add the filter feature to the Grid, and add a grouping header to the columns. When this is done, no filter option is available. If you modify the code to eliminate the grouping header, you will get a Filters menu option on the column headers.

    Code:
    Ext.Loader.setConfig({enabled: true});
    Ext.Loader.setPath('Ext.ux', '../ux');
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.ux.grid.FiltersFeature',
        'Ext.toolbar.Paging',
        'Ext.ux.ajax.JsonSimlet',
        'Ext.ux.ajax.SimManager'
    ]);
    
    Ext.define('Product', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'id',
            type: 'int'
        }, {
            name: 'company'
        }, {
            name: 'price',
            type: 'float'
        }, {
            name: 'date',
            type: 'date',
            dateFormat: 'Y-m-d'
        }, {
            name: 'visible',
            type: 'boolean'
        }, {
            name: 'size'
        }]
    });
    
    Ext.onReady(function(){
    
        Ext.ux.ajax.SimManager.init({
            delay: 300,
            defaultSimlet: null
        }).register({
            'myData': {
                data: [
                    ['small', 'small'],
                    ['medium', 'medium'],
                    ['large', 'large'],
                    ['extra large', 'extra large']
                ],
                stype: 'json'
            }
        });
    
        var optionsStore = Ext.create('Ext.data.Store', {
            fields: ['id', 'text'],
            proxy: {
                type: 'ajax',
                url: 'myData',
                reader: 'array'
            }
        });
    
        Ext.QuickTips.init();
    
        // for this demo configure local and remote urls for demo purposes
        var url = {
            local:  'grid-filter.json',  // static data file
            remote: 'grid-filter.php'
        };
    
        // configure whether filter query is encoded or not (initially)
        var encode = false;
        
        // configure whether filtering is performed locally or remotely (initially)
        var local = true;
    
        var store = Ext.create('Ext.data.JsonStore', {
            // store configs
            autoDestroy: true,
            model: 'Product',
            proxy: {
                type: 'ajax',
                url: (local ? url.local : url.remote),
                reader: {
                    type: 'json',
                    root: 'data',
                    idProperty: 'id',
                    totalProperty: 'total'
                }
            },
            remoteSort: false,
            sorters: [{
                property: 'company',
                direction: 'ASC'
            }],
            pageSize: 50
        });
    
        var filters = {
            ftype: 'filters',
            // encode and local configuration options defined previously for easier reuse
            encode: encode, // json encode the filter query
            local: local,   // defaults to false (remote filtering)
    
            // Filters are most naturally placed in the column definition, but can also be
            // added here.
            filters: [{
                type: 'boolean',
                dataIndex: 'visible'
            }]
        };
    
        // use a factory method to reduce code while demonstrating
        // that the GridFilter plugin may be configured with or without
        // the filter types (the filters may be specified on the column model
        var createColumns = function (finish, start) {
    
            var columns = [{
                dataIndex: 'id',
                text: 'Id',
                // instead of specifying filter config just specify filterable=true
                // to use store's field's type property (if type property not
                // explicitly specified in store config it will be 'auto' which
                // GridFilters will assume to be 'StringFilter'
                filterable: true,
                width: 30
                //,filter: {type: 'numeric'}
            }, {
                dataIndex: 'company',
                text: 'Company',
                id: 'company',
                flex: 1,
                filter: {
                    type: 'string'
                    // specify disabled to disable the filter menu
                    //, disabled: true
                }
            }, {
                dataIndex: 'price',
                text: 'Price',
                filter: {
                    //type: 'numeric'  // specify type here or in store fields config
                },
                width: 70
            }, {
                dataIndex: 'size',
                text: 'Size',
                filter: {
                    type: 'list',
                    store: optionsStore
                    //,phpMode: true
                }
            }, {
                dataIndex: 'date',
                text: 'Date',
                filter: true,
                renderer: Ext.util.Format.dateRenderer('m/d/Y')
            }, {
                dataIndex: 'visible',
                text: 'Visible'
                // this column's filter is defined in the filters feature config
            }];
    
            return columns.slice(start || 0, finish);
        };
        
        var grid = Ext.create('Ext.grid.Panel', {
            border: false,
            store: store,
            columns: [                                           // << added a Grouping Header
                {                                                   // <<
                    text: 'Grouping Header',                 // <<
                    columns: createColumns(4)
                }                                                   // <<
            ],                                                      // << end of modification
            loadMask: true,
            features: [filters],
            dockedItems: [Ext.create('Ext.toolbar.Paging', {
                dock: 'bottom',
                store: store
            })],
            emptyText: 'No Matching Records'
        });
    
        // add some buttons to bottom toolbar just for demonstration purposes
        grid.child('pagingtoolbar').add([
            '->',
            {
                text: 'Encode: ' + (encode ? 'On' : 'Off'),
                tooltip: 'Toggle Filter encoding on/off',
                enableToggle: true,
                handler: function (button, state) {
                    var encode = (grid.filters.encode !== true);
                    var text = 'Encode: ' + (encode ? 'On' : 'Off'); 
                    grid.filters.encode = encode;
                    grid.filters.reload();
                    button.setText(text);
                } 
            },
            {
                text: 'Local Filtering: ' + (local ? 'On' : 'Off'),
                tooltip: 'Toggle Filtering between remote/local',
                enableToggle: true,
                handler: function (button, state) {
                    var local = (grid.filters.local !== true),
                        text = 'Local Filtering: ' + (local ? 'On' : 'Off'),
                        newUrl = local ? url.local : url.remote,
                        store = grid.view.getStore();
                     
                    // update the GridFilter setting
                    grid.filters.local = local;
                    // bind the store again so GridFilters is listening to appropriate store event
                    grid.filters.bindStore(store);
                    // update the url for the proxy
                    store.proxy.url = newUrl;
    
                    button.setText(text);
                    store.load();
                } 
            },
            {
                text: 'All Filter Data',
                tooltip: 'Get Filter Data for Grid',
                handler: function () {
                    var data = Ext.encode(grid.filters.getFilterData());
                    Ext.Msg.alert('All Filter Data',data);
                } 
            },{
                text: 'Clear Filter Data',
                handler: function () {
                    grid.filters.clearFilters();
                } 
            },{
                text: 'Add Columns',
                handler: function () {
                    if (grid.headerCt.items.length < 6) {
                        grid.headerCt.add(createColumns(6, 4));
                        grid.view.refresh();
                        this.disable();
                    }
                }
            }    
        ]);
    
        var win = Ext.create('Ext.Window', {
            title: 'Grid Filters Example',
            height: 400,
            width: 700,
            layout: 'fit',
            items: grid
        }).show();
    
        store.load();
    });
    Operating System:
    • Windows 7

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,174
    Vote Rating
    1258
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    285
    Vote Rating
    20
    jhoweaa will become famous soon enough jhoweaa will become famous soon enough

      1  

    Default

    It's not quite the same thing since my bug deals with a grid with grouped column headers and not locked columns, although I don't know if underneath this might involve the same area of code.

  4. #4
    Sencha User
    Join Date
    Mar 2010
    Posts
    83
    Vote Rating
    -1
    daiei27 is an unknown quantity at this point

      0  

    Default

    I experience the same issue, losing filters when grouping columns. Sorting also inexplicably becomes disabled so that should be fixed as well. At least there is a workaround for that, though. (Specify 'sortable: true'.)

    Is the bug tracker viewable by the public and does it include an estimated timeline for a fix?

  5. #5
    Sencha User
    Join Date
    Mar 2013
    Posts
    3
    Vote Rating
    0
    sanjaykpanjagutta is on a distinguished road

      0  

    Default

    Hi Jhoweaa, how did you overcome your issue, I am experiencing same issue and like to know how did you solve yours