PDA

View Full Version : Tabs & Border Layout issue



seancallan
29 Nov 2007, 10:37 AM
FireBug is throwing a 'this.addEvents is not a function 'statesave' error when I corrected this little piece of code.

If I remove the tabs and put tree(region:'left') and editor(region:'center') into the viewport everything is fine. But once I move them to the TabPanel the error is generated.

Is this an issue with tabs? nested border layouts?



var tabs = new Ext.TabPanel({
layout: 'border',
region:'center',
activeTab: 0,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'Help',
items: [tree, editor]
}]
});

var viewport = new Ext.Viewport({
layout:'border',
items: [menu, tabs]
});

tryanDLS
29 Nov 2007, 10:42 AM
Each item you add to a container with layout:'border' has to have a region config. Is this the case? You may have to post more code? Also, if you're playing with the layout stuff, it's best to disable the StateProvider to avoid getting conflicting data from the cookies.

seancallan
29 Nov 2007, 10:43 AM
Hi tryanDLS,

Each section does have a region, I have never dealt with the StateProvider, I'll research how to disable it.

Thanks!

tryanDLS
29 Nov 2007, 11:35 AM
If you're using code based on the examples and it has this, comment it out.

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

santosh.rajan
29 Nov 2007, 11:40 AM
How can tabpanel have layout: 'border'?

seancallan
29 Nov 2007, 12:26 PM
TabPanel extends Panel and Panel has layout.

If you view the TabPanel API 2.X you'll see that `layout` and `layoutConfig` are both there. In addition to those two config options there is also `layoutOnTabChange`

I was able to locate and comment out that StateProvider but now I'm getting a new error in FireBug:


this.layout.setContainer is not a function
this.layout.setContainer(null);


Here is the 5 main portions of the code, the rest of the code was remove to keep it simple. Aside from the TabPanel addition nothing else has been changed and everything worked previously.



var tree = new Ext.tree.TreePanel({
loader:loader,
animate:true,
enableDD:true,
containerScroll: true,
collapsible: true,
ddGroup: 'organizerDD',
rootVisible:false,
region:'west',
width:200,
split:true,
autoScroll:true,
tbar: treeControls,
margins: '5 0 5 5',
listeners: {
'click': function(node, e){
loadContent(node, e);
}
}
});

var editor = {
xtype:'portal',
id:'editor',
region:'center',
margins:'5 5 5 0',
border:false,
tbar: documentControls,
items:[{
id:'column',
columnWidth:1,
style:'padding:10px 10px 10px 10px'
}]
}

var menu = {
id:'menu',
region:'north',
border:false,
contentEl:'menu0'
}

var tabs = new Ext.TabPanel({
layout: 'border',
region:'center',
activeTab: 0,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'Help',
items: [tree, editor]
}]
});

var viewport = new Ext.Viewport({
layout:'border',
items: [menu, tabs]
});

seancallan
29 Nov 2007, 12:36 PM
I got it working by changing the TabPanel around and putting a border panel inside it.



var tabs = new Ext.TabPanel({
region:'center',
activeTab: 0,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'Help',
items: new Ext.Panel({
layout:'border',
items: [tree, editor]
})
}]
});