This duplicates another bug already reported in our system: EXTJS-6920
  1. #1
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    20
    Vote Rating
    0
    marcel.urbanek is on a distinguished road

      0  

    Default Problem when deserializing state informations for grid

    Problem when deserializing state informations for grid


    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:

    Code:
    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()
    });
    Last edited by mitchellsimoens; 1 Aug 2012 at 4:41 AM. Reason: added testcase

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,074
    Vote Rating
    854
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I'm using the array grid example which uses the CookieProvider and I don't get any error in Chrome 20/21 or FF14
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    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
    Jul 2012
    Posts
    20
    Vote Rating
    0
    marcel.urbanek is on a distinguished road

      0  

    Default


    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:
    Code:
    (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.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,074
    Vote Rating
    854
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    In a locked grid I can see the issue. Will push this into our bug tracker.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    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.

  5. #5
    Sencha User
    Join Date
    Jun 2010
    Posts
    17
    Vote Rating
    0
    errd is on a distinguished road

      0  

    Default


    Hi there!

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

  6. #6
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    20
    Vote Rating
    0
    marcel.urbanek is on a distinguished road

      0  

    Question


    Hi mitchell,

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

  7. #7
    Sencha User
    Join Date
    Nov 2012
    Posts
    1
    Vote Rating
    0
    smirnov.maxim is on a distinguished road

      0  

    Default Hi

    Hi


    Have got the same problem.
    Is there a solution?