[4.1B3] Locking grid + stateful broken

[mankz]

Basic locking grid, + cookie provider.

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*'
]);

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
    });

    Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
    // create the Grid
    var grid = Ext.create('Ext.grid.Panel', {
        stateId : 'fo',
        stateful : true,
        store: store,
        columnLines: true,
        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
        }
    });
});

toMap method expects an array as first argument. lockedHeaderCt.items is a MixedCollection...

applyColumnsState: function (columns) {
var me = this,
lockedGrid = me.lockedGrid,
lockedHeaderCt = lockedGrid.headerCt,
normalHeaderCt = me.normalGrid.headerCt,
lockedCols = Ext.Array.toMap(lockedHeaderCt.items, 'headerId'),
normalCols = Ext.Array.toMap(normalHeaderCt.items, 'headerId'),

[mitchellsimoens]

Thanks for the report.

[PHaroZ]

I've a similar issue with a classic grid.

I think this is due to the selectionModel checkboxmodel which generate a new column with en errornous config.

I can fix it with this override:

    Ext.override(Ext.selection.CheckboxModel, {
                getHeaderConfig : function() {
                    return Ext.apply(this.callParent(arguments), {
                                getColumnState : function() {
                                    return false;
                                }
                            });
                }
            });

[PHaroZ]

same issue with Ext.ux.RowExpander which add to an additionnal column

[mankz]

bump, still broken in 4.1

[agunescu]

Any new updates on this one please?

[mankz]

This is marked as fixed, just checked nightlies and it's still broken for a tree using TreeStore.

getState: function(){
        var me = this,
            state = me.callParent(),
            storeState = me.store.getState();

getState is added to 'Ext.data.Store', either put it on AbstractStore or dupe it in TreeStore.

[avcmc]

As mentioned - "Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJSIV-5482 in 4.2."

Currently things are not working in 4.1.3 and this is becoming a show-stopper for us. Thus, could a workaround be shared if possible?

Also, any idea on probable release date of 4.2?

Thanks

[mankz]

Test case (crashes, use the stop at exception setting in chrome):

Ext.Loader.setConfig({
    enabled: true
});Ext.Loader.setPath('Ext.ux', '../ux');

Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.tree.*',
    'Ext.ux.CheckColumn'
]);

Ext.onReady(function() {
    Ext.QuickTips.init();
    Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
    //we want to setup a model and store instead of using dataUrl
    Ext.define('Task', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'task',     type: 'string'},
            {name: 'user',     type: 'string'},
            {name: 'duration', type: 'string'},
            {name: 'done',     type: 'boolean'}
        ]
    });

    var store = Ext.create('Ext.data.TreeStore', {
        model: 'Task',
        sorters : 'task',
        proxy: {
            type: 'ajax',
            //the store will get the content from the .json file
            url: 'treegrid.json'
        },
        folderSort: true
    });

    //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
    var tree = Ext.create('Ext.tree.Panel', {
        title: 'Core Team Projects',
        width: 500,
        height: 300,
        renderTo: Ext.getBody(),
        collapsible: true,
        useArrows: false,
        rootVisible: false,
        store: store,
        multiSelect: true,
        singleExpand: true,
        stateful : true,
        id : 'foo',

        //the 'columns' property is now 'headers'
        columns: [{
            xtype: 'treecolumn', //this is so we know which column will show the tree
            text: 'Task',
            width: 200,
            sortable: true,
            dataIndex: 'task',
            locked : true
        },{
            //we must use the templateheader component so we can use a custom tpl
            xtype: 'templatecolumn',
            text: 'Duration',
            flex: 1,
            sortable: true,
            dataIndex: 'duration',
            align: 'center',
            //add in the custom tpl for the rows
            tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', {
                formatHours: function(v) {
                    if (v < 1) {
                        return Math.round(v * 60) + ' mins';
                    } else if (Math.floor(v) !== v) {
                        var min = v - Math.floor(v);
                        return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
                    } else {
                        return v + ' hour' + (v === 1 ? '' : 's');
                    }
                }
            })
        },{
            text: 'Assigned To',
            flex: 1,
            dataIndex: 'user',
            sortable: true
        }, {
            xtype: 'checkcolumn',
            header: 'Done',
            dataIndex: 'done',
            width: 40,
            stopSelection: false
        }, {
            text: 'Edit',
            width: 40,
            menuDisabled: true,
            xtype: 'actioncolumn',
            tooltip: 'Edit task',
            align: 'center',
            icon: '../simple-tasks/resources/images/edit_task.png',
            handler: function(grid, rowIndex, colIndex, actionItem, event, record, row) {
                Ext.Msg.alert('Editing' + (record.get('done') ? ' completed task' : '') , record.get('task'));
            },
            // Only leaf level tasks may be edited
            isDisabled: function(view, rowIdx, colIdx, item, record) {
                return !record.data.leaf;
            }
        }]
    });
});

[dongryphon]

@Mankz -

Thanks for the heads up on the regression this caused - that is being tracked as EXTJSIV-8284.

@avcmc -

The code support for grid feature statefulness is quite extensive. My recommendation is to turn off statefulness on such components in 4.1.x.

As for 4.2 release, we have one big push here for final beta / RC - so hopefully "very soon" for that. The GA date is somewhat dependent on what that release turns up.