Results 1 to 5 of 5

Thread: Filter Feature doesn't work with Grouped Columns

    This issue duplicates another issue.
  1. #1
    Sencha Premium Member
    Join Date
    Apr 2009
    Vote Rating

    Default Filter Feature doesn't work with Grouped Columns


    Ext version tested:
    • Ext 4.1.3

    • 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.

    Ext.Loader.setConfig({enabled: true});
    Ext.Loader.setPath('Ext.ux', '../ux');
    Ext.define('Product', {
        extend: '',
        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'
            delay: 300,
            defaultSimlet: null
            'myData': {
                data: [
                    ['small', 'small'],
                    ['medium', 'medium'],
                    ['large', 'large'],
                    ['extra large', 'extra large']
                stype: 'json'
        var optionsStore = Ext.create('', {
            fields: ['id', 'text'],
            proxy: {
                type: 'ajax',
                url: 'myData',
                reader: 'array'
        // 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('', {
            // 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
                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;
                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
                    // update the url for the proxy
                    store.proxy.url = newUrl;
                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 () {
                text: 'Add Columns',
                handler: function () {
                    if (grid.headerCt.items.length < 6) {
                        grid.headerCt.add(createColumns(6, 4));
        var win = Ext.create('Ext.Window', {
            title: 'Grid Filters Example',
            height: 400,
            width: 700,
            layout: 'fit',
            items: grid
    Operating System:
    • Windows 7

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2

    Think my support is good? Get more personalized support via a support subscription.

    Need more help with your app? Hire Sencha Services

    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
    Vote Rating


    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
    Vote Rating


    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
    Vote Rating


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

Tags for this Thread

Posting Permissions

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