PDA

View Full Version : Problem expanding tree in border layout



logicmedia
23 Jun 2009, 6:30 AM
Hi there,

I have started working with Ext 3 and have come a few problems. This one is the one that have lost me the most hair.

I have a simpel border layout with the east panel collapsed (collapsMenu = true). It contains a tree where I try to expand the root node. This fails.

How ever if I start with the panel expanded (collapsMenu = false) everything works and the root node expands as expected.

Any idea why I cannot expand my tree root node as long as the containing panel is collapsed. Any suggestion as to how this shoudl be done the right way?

Of course this works in Ext 2.2...

My code:



Ext.onReady(function(){
var collapsMenu = true;

var treeMenu = new Ext.tree.TreePanel({
id: 'id_treeMenu',
split: true,
autoScroll:true,
animate:true,
enableDD:true,
containerScroll:true,
autoScroll: false,
singleExpand: false,
border: false,
root: {
nodeType: 'async',
text: 'Rod',
draggable:false,
id:'source'
},
rootVisible: true,
loader: new Ext.tree.TreeLoader({
dataUrl: '/xget/xgetMenu.asp?imid=0&eid=0'
})
});
Ext.getCmp('id_treeMenu').root.expand();

var viewport = new Ext.Viewport({
layout:'border',
items:[{
region:'center',
layout:'fit',
border: true,
title: 'test',
html: 'test'
},{
region: 'east',
title: 'Menustruktur',
width: 225,
split:true,
collapsible:true,
collapsed: (typeof(collapsMenu) == "undefined") ? true : collapsMenu,
items: [treeMenu]
}]
});

});
Regards,

Thomas

makana
23 Jun 2009, 10:31 AM
Do not overnest!!! The TreePanel IS your east panel!

Apply all options (except the "items" of course) of your east panel to your TreePanel and append it directly to the viewport.

logicmedia
23 Jun 2009, 11:00 PM
Thanks for the tip - it worked! Guess the game is to keep it simple...

My code ended up looking like this:





Ext.onReady(function(){
var collapsMenu = true;
var viewport = new Ext.Viewport({
layout:'border',
items:[{
region:'center',
layout:'fit',
border: true,
title: 'test',
html: 'test'
},{
xtype: 'treepanel',
id: 'id_treeMenu',
split: true,
autoScroll:true,
animate:true,
enableDD:true,
containerScroll:true,
autoScroll: false,
singleExpand: false,
border: false,
region: 'east',
title: 'Menustruktur',
width: 225,
split:true,
collapsible:true,
collapsed: (typeof(collapsMenu) == "undefined") ? true : collapsMenu,
root: {
nodeType: 'async',
text: 'Rod',
draggable:false,
id:'source'
},
rootVisible: true,
loader: new Ext.tree.TreeLoader({
dataUrl: '/xget/xgetMenu.asp?imid=0&eid=0'
})
}]
});
Ext.getCmp('id_treeMenu').root.expand();