You found a bug! We've classified it as EXTJS-9575 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    8
    Vote Rating
    0
    svalmont is on a distinguished road

      0  

    Default Grid reconfigure causes problems

    Grid reconfigure causes problems


    Hi,

    I've found a problem in the grid.reconfigure() method:

    If you do a reconfigure of a grid panel (i.e. reconfigure it with a new store) and then do a revert (i.e. a reconfigure with the initial store) the reconfigure will fail because of this:

    TypeError: me.getStoreListeners is not a function
    (ext-all-debug.js line 41914 - bindStoreListeners method of Ext.util.Bindable)

    The error causes all table headers to disappear and the application is not working anymore.

    TestModel.js:
    Code:
    Ext.define('test.model.TestModel', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'idfield', type: 'string' },
            { name: 'rating', type: 'int' },
            { name: 'salary', type: 'int' },
            { name: 'name', type: 'string' }
        ],
        
        proxy: {
            type: 'direct',
            directFn: testBufferedStoreSvc.getTestData,
            reader: {
                root: 'records'
            }
        }
    });
    TestStore.js and NewTestStore.js (same stores - different names):
    Code:
    Ext.define('test.store.TestStore', {
        extend: 'Ext.data.Store',
        model: 'test.model.TestModel',
        
        autoLoad: true,
        buffered: true,
        leadingBufferZone: 300,
        pageSize: 100
    });
    TestGridPanel.js:
    Code:
    var myColumns = [
        { text: 'ID', dataIndex: 'idfield', flex: 1 },
        { text: 'Name', dataIndex: 'name', flex: 1 },
        { text: 'Rating', dataIndex: 'rating', flex: 1 },
        { text: 'Salary', dataIndex: 'salary', flex: 1 }
    ];
    
    Ext.define('test.view.grid.TestGridPanel',  {
        extend: 'Ext.grid.Panel',
        alias: 'widget.testgridpanel',
        
        width: 800,
        height: 500,
        title: 'Some random data',
        store: 'TestStore',
        loadMask: true,
        selModel: { pruneRemoved: false },
        plugins: [{ ptype: 'bufferedrenderer' }],
        columns: myColumns,
        
        tbar: ['->',
            {
                xtype: 'button',
                text: 'Reconfigure',
                itemId: 'reconfigure',
                handler: function() {
                    var panel = this.up('testgridpanel');
                    var store = Ext.data.StoreManager.lookup('NewTestStore');
                    store.load();
                    panel.reconfigure(store);
                }
            },
            {
                xtype: 'button',
                text: 'Revert',
                itemId: 'revert',
                handler: function() {
                    var panel = this.up('testgridpanel');
                    var store = Ext.data.StoreManager.lookup('TestStore');
                    store.load();
                    panel.reconfigure(store);
                }
            }
        ]
    });
    Note: the extdirectspring method returns just some random remote test data.

    To reproduce the error just click on the 'Reconfigure' button and then on the 'Revert' button.

    Thanks for your help!
    Thomas

    *EDIT BY SLEMMON
    inline test case:
    Code:
    Ext.define('test.model.TestModel', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'idfield', type: 'string' },
            { name: 'rating', type: 'int' },
            { name: 'salary', type: 'int' },
            { name: 'name', type: 'string' }
        ],
        
        proxy: {
            type: 'ajax',
            url: 'data/json.json',
            reader: {
                type: 'json',
                root: 'records'
            }
        }
    });
    
    
    Ext.define('test.store.TestStore', {
        extend: 'Ext.data.Store',
        model: 'test.model.TestModel',
        
        autoLoad: true,
        buffered: true,
        leadingBufferZone: 300,
        pageSize: 100
    });
    
    
    var store1 = Ext.create('test.store.TestStore');
    var store2 = Ext.create('test.store.TestStore');
    
    
    var myColumns = [
        { text: 'ID', dataIndex: 'idfield', flex: 1 },
        { text: 'Name', dataIndex: 'name', flex: 1 },
        { text: 'Rating', dataIndex: 'rating', flex: 1 },
        { text: 'Salary', dataIndex: 'salary', flex: 1 }
    ];
    
    
    Ext.define('test.view.grid.TestGridPanel',  {
        extend: 'Ext.grid.Panel',
        alias: 'widget.testgridpanel',
        
        width: 800,
        height: 500,
        title: 'Some random data',
        store: store1,
        loadMask: true,
        selModel: { pruneRemoved: false },
        plugins: [{ ptype: 'bufferedrenderer' }],
        columns: myColumns,
        
        tbar: ['->',
            {
                xtype: 'button',
                text: 'Reconfigure',
                itemId: 'reconfigure',
                handler: function() {
                    var panel = this.up('testgridpanel');
                    //var store = Ext.data.StoreManager.lookup('NewTestStore');
                    store2.load();
                    panel.reconfigure(store2);
                }
            },
            {
                xtype: 'button',
                text: 'Revert',
                itemId: 'revert',
                handler: function() {
                    var panel = this.up('testgridpanel');
                    //var store = Ext.data.StoreManager.lookup('TestStore');
                    store1.load();
                    panel.reconfigure(store1);
                }
            }
        ]
    });
    
    
    Ext.widget('testgridpanel', {
        renderTo: Ext.getBody()
    });
    Last edited by slemmon; 23 Apr 2013 at 9:05 PM. Reason: added inline test case

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,979
    Vote Rating
    212
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    What do you see if you do:
    reconfigure() then load()

    instead of load() then reconfigure()

  3. #3
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    8
    Vote Rating
    0
    svalmont is on a distinguished road

      0  

    Default


    Nope. Nothing changes.

    But I've seen that my example is only working if you add the columns to the reconfigure.
    So instead of panel.reconfigure(store);
    you need to write panel.reconfigure(store, myColumns);
    in both handler functions.

    Thanks!

  4. #4
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    8
    Vote Rating
    0
    svalmont is on a distinguished road

      0  

    Default


    Any ideas? Any help on this would be appreciated!

  5. #5
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,979
    Vote Rating
    212
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

Thread Participants: 1