PDA

View Full Version : [FIXED] Grid data not rendered in TabPanel on none active tab



htammen
23 Feb 2011, 12:43 AM
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
23 Feb 2011, 4:23 AM
I noticed the same thing. From what I've seen, if you resize one of the grid's column, the data magically appears.

evant
23 Feb 2011, 4:30 AM
This is a bug, we'll look into it. Thanks.

htammen
23 Feb 2011, 4:40 AM
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
23 Feb 2011, 6:15 PM
This will be fixed in the PR2 release coming out soon.