1. #1
    Sencha User
    Join Date
    Sep 2009
    Posts
    4
    Vote Rating
    0
    karaozgur is on a distinguished road

      0  

    Default 4.1.1 RC1 Grid State Bug

    4.1.1 RC1 Grid State Bug


    Hi,

    If grid has locked column, grid can not restore it's state.

    here is a test:

    Code:
            Ext.require([
                'Ext.grid.*',
                'Ext.data.*',
                'Ext.util.*',
                'Ext.state.*'
            ]);
    
    
            Ext.onReady(function () {
                Ext.QuickTips.init();
                Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
                   expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
                }));
    
    
                // 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,
                    stateful: true,
                    stateId: 'test123',
                    columns: [{
                        text: 'Company<br>Name', // Two line header! Test header height synchronization!
                        locked: true,
                        width: 200,
                        sortable: false,
                        dataIndex: 'company'
                    }, {
                        text: 'Price',
                        width: 125,
                        sortable: true,
                        renderer: 'usMoney',
                        dataIndex: 'price'
                    }, {
                        text: 'Change',
                        width: 125,
                        sortable: true,
                        renderer: change,
                        dataIndex: 'change'
                    }, {
                        text: '% Change',
                        width: 125,
                        sortable: true,
                        renderer: pctChange,
                        dataIndex: 'pctChange'
                    }, {
                        text: 'Last Updated',
                        width: 135,
                        sortable: true,
                        renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                        dataIndex: 'lastChange'
                    }],
                    height: 350,
                    width: 600,
                    title: 'Locking Grid Column',
                    renderTo: 'grid-example',
                    viewConfig: {
                        stripeRows: true
                    }
                });
            });

  2. #2
    Touch Premium Member
    Join Date
    Feb 2011
    Location
    NJ
    Posts
    311
    Vote Rating
    52
    droessner is a jewel in the rough droessner is a jewel in the rough droessner is a jewel in the rough

      0  

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    5
    Vote Rating
    1
    jwwhynot is on a distinguished road

      0  

    Default Temporary Fix

    Temporary Fix


    I have worked around this problem by changing a few lines in the applyColumnState of Lockable. The issues are Ext.Array.toMap is being called with a mixed collection instead of an Array and "headerId" is not unique between the 2 halves of the grid. This solution requires that stateId be set uniquely for each column as part of the workaround.

    Code:
    Ext.require('Ext.grid.Lockable', function() {
        Ext.override(Ext.grid.Lockable, {
            applyColumnsState: function (columns) {
                var me             = this,
                    lockedGrid     = me.lockedGrid,
                    lockedHeaderCt = lockedGrid.headerCt,
                    normalHeaderCt = me.normalGrid.headerCt,
                    lockedCols     = Ext.Array.toMap(lockedHeaderCt.items.items, 'stateId'), // Changed
                    normalCols     = Ext.Array.toMap(normalHeaderCt.items.items, 'stateId'), // Changed
                    locked         = [],
                    normal         = [],
                    lockedWidth    = 1,
                    length         = columns.length,
                    i, existing,
                    lockedDefault,
                    col;
                for (i = 0; i < length; i++) {
                    col = columns[i];
                    lockedDefault = lockedHeaderCt.items.items[lockedCols[col.id]-1]; // Changed
                    existing = lockedDefault || normalHeaderCt.items.items[normalCols[col.id]-1]; // Changed
                    if (existing) {
                        if (existing.applyColumnState) {
                            existing.applyColumnState(col);
                        }
                        if (existing.locked === undefined) {
                            existing.locked = !!lockedDefault;
                        }
                        if (existing.locked) {
                            locked.push(existing);
                            if (!existing.hidden && typeof existing.width == 'number') {
                                lockedWidth += existing.width;
                            }
                        } else {
                            normal.push(existing);
                        }
                    }
                }
                // state and config must have the same columns (compare counts for now):
                if (locked.length + normal.length == lockedHeaderCt.items.getCount() + normalHeaderCt.items.getCount()) {
                    lockedHeaderCt.removeAll(false);
                    normalHeaderCt.removeAll(false);
                    lockedHeaderCt.add(locked);
                    normalHeaderCt.add(normal);
                    lockedGrid.setWidth(lockedWidth);
                }
            }
        });
    });

Thread Participants: 2

Tags for this Thread