Problem when deserializing state informations for grid

[marcel.urbanek]

Hi,
I have discovered a problem when trying to use the grid in 'stateful' mode.

REQUIRED INFORMATION

Ext version tested:

• Ext 4.1.1 Build date: 2012-07-04 21:23:42

Browser versions tested against:

• Google Chrome 20.0.1132.57 m

Description:

• When activating stateful:true and using either Ext.state.LocalStorageProvider or Ext.state.CookieProvider an error occurs when using a grid with frozen/locked columns

Steps to reproduce the problem:

• Set stateful to true, use frozen/locked headers.

The result that was expected:

• The saved state should be applied to the grid when reloading the page.

The result that occurs instead:

• When reloading the page following error occurs:

Uncaught TypeError: Cannot read property 'headerId' of undefined
at line 1674:
map[array[i][getKey]] = i+1;

I am not sure about that, but I think this is not correct implemented. Since map is an instance of Ext.util.AbstractMixedCollection it should be:
map[array.get(i)[getKey]] = i+1;


TestCase:

var tempStorageProvider = new Ext.state.CookieProvider();
Ext.state.Manager.setProvider(tempStorageProvider);

Ext.define('ForumThread', {
    extend     : 'Ext.data.Model',
    fields     : [
        'title', 'forumtitle', 'forumid', 'username', {
            name : 'replycount',
            type : 'int'
        }, {
            name       : 'lastpost',
            mapping    : 'lastpost',
            type       : 'date',
            dateFormat : 'timestamp'
        },
        'lastposter', 'excerpt', 'threadid'
    ],
    idProperty : 'threadid'
});

// create the Data Store
var store = Ext.create('Ext.data.Store', {
    id         : 'store',
    model      : 'ForumThread',
    remoteSort : true,
    // allow the grid to interact with the paging scroller by buffering
    buffered   : true,
    pageSize   : 100,
    proxy      : {
        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
        type           : 'jsonp',
        url            : 'http://www.sencha.com/forum/remote_topics/index.php',
        reader         : {
            root          : 'topics',
            totalProperty : 'totalCount'
        },
        // sends single sort as multi parameter
        simpleSortMode : true
    },
    sorters    : [
        {
            property  : 'lastpost',
            direction : 'DESC'
        }
    ],
    autoLoad   : true
});

function renderTopic(value, p, record) {
    return Ext.String.format(
        '<a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a>',
        value,
        record.data.forumtitle,
        record.getId(),
        record.data.forumid
    );
}

var grid = Ext.create('Ext.grid.Panel', {
    width       : 700,
    height      : 500,
    stateful    : true,
    id          : 'test',
    collapsible : true,
    title       : 'ExtJS.com - Browse Forums',
    store       : store,
    loadMask    : true,
    selModel    : {
        pruneRemoved : false
    },
    multiSelect : true,
    viewConfig  : {
        trackOver : false
    },
    // grid columns
    columns     : [
        {
            xtype    : 'rownumberer',
            width    : 50,
            sortable : false
        },
        {
            tdCls     : 'x-grid-cell-topic',
            text      : "Topic",
            dataIndex : 'title',
            //flex      : 1,
            width     : 350,
            renderer  : renderTopic,
            sortable  : false,
            locked    : true
        },
        {
            text      : "Author",
            dataIndex : 'username',
            width     : 100,
            hidden    : true,
            sortable  : true
        },
        {
            text      : "Replies",
            dataIndex : 'replycount',
            align     : 'center',
            width     : 70,
            sortable  : false
        },
        {
            id        : 'last',
            text      : "Last Post",
            dataIndex : 'lastpost',
            width     : 130,
            renderer  : Ext.util.Format.dateRenderer('n/j/Y g:i A'),
            sortable  : true
        }
    ],
    renderTo    : Ext.getBody()
});

[mitchellsimoens]

I'm using the array grid example which uses the CookieProvider and I don't get any error in Chrome 20/21 or FF14

[marcel.urbanek]

Hi,

I produced a testcase for this bug. I slightly modified the infinite grid example by adding a locked column and making the grid stateful:

(function(){
    var tempStorageProvider;
    try{
        tempStorageProvider=Ext.create("Ext.state.LocalStorageProvider");
    } catch (err) {
        tempStorageProvider=new Ext.state.CookieProvider();
    }
    Ext.state.Manager.setProvider(tempStorageProvider);
})();


Ext.Loader.setConfig({enabled: true});


Ext.Loader.setPath('Ext.ux', '../ux/');
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.grid.PagingScroller'
]);


Ext.onReady(function(){
    Ext.define('ForumThread', {
        extend: 'Ext.data.Model',
        fields: [
            'title', 'forumtitle', 'forumid', 'username', {
                name: 'replycount',
                type: 'int'
            }, {
                name: 'lastpost',
                mapping: 'lastpost',
                type: 'date',
                dateFormat: 'timestamp'
            },
            'lastposter', 'excerpt', 'threadid'
        ],
        idProperty: 'threadid'
    });


    // create the Data Store
    var store = Ext.create('Ext.data.Store', {
        id: 'store',
        model: 'ForumThread',
        remoteSort: true,
        // allow the grid to interact with the paging scroller by buffering
        buffered: true,
        pageSize: 100,
        proxy: {
            // load using script tags for cross domain, if the data in on the same domain as
            // this page, an HttpProxy would be better
            type: 'jsonp',
            url: 'http://www.sencha.com/forum/remote_topics/index.php',
            reader: {
                root: 'topics',
                totalProperty: 'totalCount'
            },
            // sends single sort as multi parameter
            simpleSortMode: true
        },
        sorters: [{
            property: 'lastpost',
            direction: 'DESC'
        }],
        autoLoad: true
    });


    function renderTopic(value, p, record) {
        return Ext.String.format(
            '<a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a>',
            value,
            record.data.forumtitle,
            record.getId(),
            record.data.forumid
        );
    }


    var grid = Ext.create('Ext.grid.Panel', {
        width: 700,
        height: 500,
        stateful:true,
        id: 'test',
        collapsible: true,
        title: 'ExtJS.com - Browse Forums',
        store: store,
        loadMask: true,
        selModel: {
            pruneRemoved: false
        },
        multiSelect: true,
        viewConfig: {
            trackOver: false
        },
        // grid columns
        columns:[{
            xtype: 'rownumberer',
            width: 50,
            sortable: false
        },{
            tdCls: 'x-grid-cell-topic',
            text: "Topic",
            dataIndex: 'title',
            flex: 1,
            renderer: renderTopic,
            sortable: false,
            locked:true
        },{
            text: "Author",
            dataIndex: 'username',
            width: 100,
            hidden: true,
            sortable: true
        },{
            text: "Replies",
            dataIndex: 'replycount',
            align: 'center',
            width: 70,
            sortable: false
        },{
            id: 'last',
            text: "Last Post",
            dataIndex: 'lastpost',
            width: 130,
            renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
            sortable: true
        }],
        renderTo: Ext.getBody()
    });
});

First open the page with the grid, change some settings of the grid (column width or something) then reload the page: The error occurs.

[mitchellsimoens]

In a locked grid I can see the issue. Will push this into our bug tracker.

[errd]

Hi there!

Have got the same problem.
Any progress on this issue?

[marcel.urbanek]

Hi mitchell,

would it help if I open a regular ticket for this issue?

[smirnov.maxim]

Have got the same problem.
Is there a solution?