1. #11
    Sencha User
    Join Date
    Nov 2011
    Posts
    4
    Vote Rating
    0
    Leila is on a distinguished road

      0  

    Default


    Great plugin! Thanks a lot.

  2. #12
    Sencha User
    Join Date
    Dec 2011
    Posts
    8
    Vote Rating
    0
    vn_vinod is on a distinguished road

      0  

    Default Grouped Header First Column Filter Not Displayed

    Grouped Header First Column Filter Not Displayed


    Hi,

    When I add Grouped Header to the first column the filter is not displayed. Implemented filter to http://dev.sencha.com/deploy/ext-4.0...ader-grid.html

    Posted the same issue at http://www.sencha.com/forum/showthre...201#post696201

    My Code

    Code:
    Ext.onReady(function() {
        Ext.QuickTips.init();
    
        // sample static data for the store
        var myData = [
            ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
            ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
            ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
            ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
            ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
            ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
            ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
            ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
            ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
            ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
            ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
            ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
            ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
            ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
            ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
            ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
            ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
            ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
            ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
            ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
            ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
            ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
            ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
            ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
            ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
            ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
            ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
            ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
            ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
        ];
    
        /**
         * Custom function used for column renderer
         * @param {Object} val
         */
        function change(val) {
            if (val > 0) {
                return '<span style="color:green;">' + val + '</span>';
            } else if (val < 0) {
                return '<span style="color:red;">' + val + '</span>';
            }
            return val;
        }
    
        /**
         * Custom function used for column renderer
         * @param {Object} val
         */
        function pctChange(val) {
            if (val > 0) {
                return '<span style="color:green;">' + val + '%</span>';
            } else if (val < 0) {
                return '<span style="color:red;">' + val + '%</span>';
            }
            return val;
        }
    
        // create the data store
        var store = Ext.create('Ext.data.ArrayStore', {
            fields: [
               {name: 'company'},
               {name: 'price',      type: 'float'},
               {name: 'change',     type: 'float'},
               {name: 'pctChange',  type: 'float'},
               {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
            ],
            data: myData
        });
    
        // create the Grid
        var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            columnLines: true,
            columns: [{
                text: 'Company',
                columns: [{
                text     : 'Company',
                flex     : 1,
                sortable : false,
                dataIndex: 'company',
                 filter: {
                    xtype: 'textfield'
                }
                }]
            }, {
                text: 'Stock Price',
                columns: [{
                    text     : 'Price',
                    width    : 75,
                    sortable : true,
                    renderer : 'usMoney',
                    dataIndex: 'price',
                 filter: {
                    xtype: 'textfield'
                }
                }, {
                    text     : 'Change',
                    width    : 75,
                    sortable : true,
                    renderer : change,
                    dataIndex: 'change'
                }, {
                    text     : '% Change',
                    width    : 75,
                    sortable : true,
                    renderer : pctChange,
                    dataIndex: 'pctChange'
                }]
            }, {
                text     : 'Last Updated',
                width    : 85,
                sortable : true,
                renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                dataIndex: 'lastChange'
            }],
            height: 350,
            width: 600,
            title: 'Grouped Header Grid',
            renderTo: 'grid-example',
            viewConfig: {
                stripeRows: true
            },
            plugins: [Ext.create('Ext.ux.grid.GridHeaderFilters')]
        });
    });
    Thank you in advance.

  3. #13
    Sencha User
    Join Date
    Jul 2011
    Posts
    22
    Vote Rating
    2
    marco.napetti is on a distinguished road

      0  

    Default


    Hi,
    I'm trying to use your plugin, my grid needs to often change its columns, but when I call
    Code:
    this.reconfigure(null, aColumns);
    this exception gets throwed:
    Code:
    this.containers[column.id] is undefined
    GridHeaderFilters.js Line 489
    Maybe this plugin is incompatible with reconfigure?
    The only way I can get it working is putting it on the first columns definitions, the problems starts after reconfigure.


    Thank you in advance.
    Marco

  4. #14
    Sencha Premium Member
    Join Date
    Nov 2007
    Location
    Bucharest, Romania
    Posts
    14
    Vote Rating
    0
    puya is on a distinguished road

      0  

    Default


    Congratulations, great plugin!

    There was an issue when having a grid in a hidden panel. The grid was rendered (rendered = true, afterender was called), but the actual columns were not rendered yet so renderFilters failed. the solution was to not listen to grid's after render, but to headerCt's after render, like so :

    Code:
            
            this.grid.on({
                scope: this,
                columnresize: this.resizeFilterContainer,
                beforedestroy: this.onDestroy,
                beforestatesave: this.saveFilters,
                afterlayout: this.adjustFilterWidth
            });
            this.grid.headerCt.on({
                scope: this,
                afterrender: function(){
                    this.renderFilters();
                }
            });

  5. #15
    Sencha User Jad's Avatar
    Join Date
    Feb 2012
    Location
    annecy france
    Posts
    61
    Vote Rating
    1
    Jad is on a distinguished road

      0  

    Default I have found a bug

    I have found a bug


    Hello, very great plugin :-)

    But I have found a bug

    When you try to create a grid having this plugin like this
    Code:
    var panel = Ext.create('grid', { region: 'center' });
    this.centerArea.add(panel);
    this.centerArea.layout.setActiveItem(panel);
    I have fixed it

    Code:
    adjustFilterWidth: function()
        {
            if(!this.containers) return;
            var columns = this.grid.headerCt.getGridColumns(true);
            for(var c=0; c < columns.length; c++)
            {
                var column = columns[c];
                if (column.filter && column.flex)
                {
                    this.containers[column.id].setWidth(column.getWidth()-1);
                }
            }
        },

  6. #16
    Sencha User
    Join Date
    Mar 2012
    Posts
    2
    Vote Rating
    0
    KakaxiTaDie is on a distinguished road

      0  

    Default a new problem

    a new problem


    Hi!I'm using EXTJS 4.0 .Your plugin is great! Now I need a dynamic grid (json configuired) with filters on the header .With it I can get the store and columnModel from the database.But the plugin doesn't work because the filters disappear.Can't it re-configure the columnModel after grid initialization? Can you help me?Thanks!

  7. #17
    Sencha Premium Member d.zucconi's Avatar
    Join Date
    Jun 2008
    Location
    Piacenza (Italy)
    Posts
    78
    Vote Rating
    5
    d.zucconi is on a distinguished road

      0  

    Default


    Quote Originally Posted by KakaxiTaDie View Post
    Can't it re-configure the columnModel after grid initialization ?
    Grid re-configuration is not currently supported.

    Thanks to puya and Jad for their fixes and suggestions. I'm going to update the source code on the first page ASAP.

  8. #18
    Sencha User
    Join Date
    Jun 2011
    Posts
    1
    Vote Rating
    0
    qamarjtahir is on a distinguished road

      0  

    Default Filter renders well but throws database error while filtering

    Filter renders well but throws database error while filtering


    In my case the filter renders well but throws a db error while trying to filter on any column.

    The error for example that I get is: missing right parenthesis

    Does any body get this type of error or any db error.

    Shouldn't the plugin handle the filtering of data?

  9. #19
    Sencha User
    Join Date
    Jun 2009
    Posts
    29
    Vote Rating
    2
    JIMECKELS is on a distinguished road

      0  

    Default Filter bug?

    Filter bug?


    Filtering on date fields do not respect the dateFormat of the filter definition.
    Code:
    filter: { xtype: 'datefield', dateFormat: 'Y-m-d H:i:s'  }
    I've made a change locally on my system so that the format provided is respected, so the filter that gets passed back to the server (on remote filters) look as I expect. Is this the way you'd expect date filtering to take place?
    Code:
        parseFilters: function()
        {
            var filters = {};
            var filterValue;
            if(!this.fields)
                return filters;
            for(var fn in this.fields)
            {
                var field = this.fields[fn];
                if(!field.isDisabled())
                {
                    filterValue = field.getValue();
                    if (field.dateFormat && Ext.isDate(filterValue))
                    {
                        filters[field.filterName] = Ext.Date.format(filterValue,field.dateFormat);
                    }
                    else
                    {
                        filters[field.filterName] = filterValue;
                    }                
                }
            }
            return filters;
        },

    Also, on more general note, why is the filter that is created on the store differently formatted (when inspecting the params on the server-side call) than the filter that the Ext.ux.grid.FiltersFeature uses?

    Ext.ux.grid.FiltersFeature params looks something like ...
    Code:
    filter[{"type":"date","comparison":"eq","value":"1999-01-01 00:00:00","field":"SUNRISE_DATE"}]
    Ext.ux.grid.GridHeaderFilters params looks something like ...
    Code:
    filter[{"property":"SUNRISE_DATE","value":"1999-01-01T00:00:00"}]
    With this "fix" in place, my params for date ftilering look consistent as the provided dateFormat suggests.

    Code:
    filter[{"property":"SUNRISE_DATE","value":"1999-01-01 00:00:00"}]
    If I am doing this incorrectly, or my expectations of the dateFormat handing is incorrect, any guidance would be appreciated.

    Thanks.

  10. #20
    Sencha User
    Join Date
    Mar 2012
    Posts
    4
    Vote Rating
    0
    mik83only is on a distinguished road

      0  

    Default server-side filtering

    server-side filtering


    Is there a way to use server-side filtering with this plugin ?

    UPDATE: I figured out it can be done with store's remoteFilter parameter