PDA

View Full Version : Problem adding Grid Panel to container Border Layout



simonr26
7 Dec 2011, 5:23 AM
I am having a problem when I attempt to repeatedly add a grid panel to
a container's center region having a border layout.


I have created a Viewport which has a border layout.


In the west region, there is a tree panel. When the leaf node is selected
for the first time, a grid panel is displayed correctly in the center region.
When the leaf node is reselected, the grid panel is redisplayed incorrectly
and the following error message is output to console:


Uncaught TypeError: Cannot read property 'style' of undefined


1) Please would you be able to indicate how to fix this bug.
2) I haven't attached all the code I'm using (I've tried to narrow it down) and
there may another problem which also causes this error - so any general advice
on e.g. what properties/configs/layouts need to be set when adding grid panel
to border layout region would be very welcome.







Ext.define('Users', {
extend: 'Ext.data.Store'
});

Ext.define('GPanel' ,{
extend: 'Ext.grid.Panel',
title: 'Events',
store: userStore,
id: 'grd',
itemId: 'centerPanel',
columns: [
{
text: 'Name',
dataIndex: 'name'
},
{
text: 'Birth Date',
dataIndex: 'date'
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'datefield',
fieldLabel: 'Filter',


}
]
}
]
});




var userStore;
var pan;


var rootNode = {
text: 'Upshot',
expanded: true,
children: [
{
text: 'Unmatched Events',
id: 'ue',
leaf: true
}
]
}


var tree = {
xtype : 'treepanel',
id : 'treepanel',
autoScroll : true,
multiselect: true,
root : rootNode,
listeners: {
itemclick : function(view,rec,item,index,eventObj) {
if(rec.get('id')=='ue') {
var centerRegion = Ext.getCmp('centerRegion');
var centerPanel = centerRegion.getComponent('centerPanel');
centerRegion.remove(centerPanel, true);
pan = Ext.create('GPanel');
centerRegion.add(pan);
}
}
}
}


Ext.application({


launch: function () {


Ext.create('Ext.container.Viewport', {
title: 'Unmatched Events',
layout : 'border',
items : [
{
title : 'West Panel',
region : 'west',
collapsible : true,
collapseMode : 'mini',
resizable: true,
width : 200,
layout: 'fit',
items: tree
},
{
xtype : 'container',
region : 'center',
layout : 'fit',
id : 'centerRegion',
autoEl : {},
items : {
title : 'Center Region',
id : 'centerPanel',
html : 'I am disposable',
frame : true
}
}
]
});
}
});





kind regards,
Simon

simonr26
7 Dec 2011, 6:07 AM
Hello,

Thanks to a reply from an earlier post, by somebody else on a similar theme, I seemed to have resolved this by not using dockeditems and instead using bbar and tbar.

kind regards,
Simon