[FIXED] Grid data not rendered in TabPanel on none active tab

[htammen]

in a TabPanel data of a grid is currently not rendered if I reload the data from my backend and the tab thats the container of the grid is not the activeTab. If it´s the activeTab data is rendered correctly.

Have a look at the following example.
When "First tab" is active and I press the "Refresh" button the new data is not rendered in the grid of "Second tab". The initial store.loadData inside initComponent works fine.

Any clues or is it a bug of the early preview version?

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

Ext.define('SO.ux.dummy.GridInTabpanel', {
     extend: 'Ext.panel.Panel',
    
     myData: [
        {company:'3m Co', change:71.72, pctChange: 0.02},
        {company:'Alcoa Inc', change:29.01, pctChange: 0.42},
        {company:'Altria Group Inc', change:83.81, pctChange: 0.28},
        {company:'American Express Company', change:52.55, pctChange:0.01}
     ],

    initComponent: function() {
        var store = Ext.create('Ext.data.ArrayStore', {
            fields: [
               {name: 'company'},
               {name: 'change',     type: 'float'},
               {name: 'pctChange',  type: 'float'}
            ],
            //data: this.myData
        });
        
        store.loadData(this.myData, false);
        
        
        Ext.apply(this, {
            xtype: 'panel',
            layout: 'fit',
            minWidth: 100,
            minHeight: 100,
            title: 'Container',
            items: [{
                xtype: 'tabpanel',
                activeTab: 0,
                defaults: {
                    labelWidth: 150
                },
                deferredRender: false,
                layoutConfig: {
                    deferredRender: false
                },
                ref: '../../editPanel',
                id: 'editPanel',
                items: [
                    {
                        xtype: 'panel',
                        layout: 'vbox',
                        title: 'First Tab',
                        items: [
                            {
                                xtype: 'textfield',
                                width: 400,
                                fieldLabel: 'Name',
                                name: 'name',
                                id: 'name'
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        title: 'Second Tab',
                        layout: 'fit',
                        autoHeight: true,
                        autoScroll: true,
                        items: [
                            {
                                xtype: 'gridpanel',
                                store: store,
                                autoHeight: true,
                                stripeRows: true,
                                autoExpandColumn: 1,
                                id: 'myGrid',
                                headers: [{
                                    id       :'company',
                                    text   : 'Company',
                                    //width: 120,
                                    flex: 1,
                                    sortable : true, 
                                    dataIndex: 'company'
                                },{
                                    text   : 'Change', 
                                    width    : 75, 
                                    sortable : true, 
                                    renderer : this.change, 
                                    dataIndex: 'change'
                                },{
                                    text   : '% Change', 
                                    width    : 75, 
                                    sortable : true, 
                                    renderer : this.pctChange, 
                                    dataIndex: 'pctChange'
                                }]
                            }
                        ]
                    }
                    ]
            }],
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'top',
                items: [{
                        xtype: 'button',
                        text: 'Refresh',
                        id: 'btnRefresh'
                }]
            }]
        });
        this.callParent(arguments);
        
        Ext.getCmp('btnRefresh').on('click', this.onRefresh, this);
    },
    
    onRefresh: function() {
        var localData = [
                 {company:'ABC', change: 71.72, pctChange: 0.02},
                 {company:'DEF', change: 29.01, pctChange: 0.42},
                 {company:'GHI', change: 83.81, pctChange: 0.28}
             ]
        var store = Ext.getCmp('myGrid').store;
        store.loadData(localData, false);
             
        Ext.Msg.alert('Refresh', 'Data has been refreshed');
    }
    
}); 

[Seboss]

I noticed the same thing. From what I've seen, if you resize one of the grid's column, the data magically appears.

[evant]

This is a bug, we'll look into it. Thanks.

[htammen]

I noticed the same thing. From what I've seen, if you resize one of the grid's column, the data magically appears.

yes, but only for the column that is resized.

[aconran]

This will be fixed in the PR2 release coming out soon.