PDA

View Full Version : Tabpanel items as own Tabpanel



timg
24 Sep 2010, 1:09 AM
Hello,

i have a simple Tabpanel which i want to extend.

[tabpanel]
[tab1][tab2][tab3]

i want the tabpanel to be

[tabpanel]
[MY TABPANEL]
[MY Tab]
[tab1][tab2][tab3]

any Idea how to do extend the first example to the second(by Code)?
i want to write an plugin and need to extend the tabpanel.
i tried to clone the item collection, add one item ([MY TABPANEL]) to [tabpanel] and use the cloned items for [MY Tab]. i cant really clone the items ...

has somebody an idea how to do that?

troseberry
24 Sep 2010, 5:07 AM
So you want 4 tab panels embedded inside each other? The visual you give is a little confusing. What do you mean by "clone" you want a duplicate tab panel inside of itself?

timg
24 Sep 2010, 5:14 AM
yes right.

i have a tabpanel with items. i just want to create one tabpanel in this tabpanel with the items of the old tabpanel.

the old tabpanel should only have one tab. inside this tab sould be my new tabpanel with the old tab items.

troseberry
24 Sep 2010, 5:26 AM
And you want to do this dynamically?

timg
24 Sep 2010, 5:34 AM
yes, because the tabpanel already exists if i can edit it.

i just want to extend a gui written in extJS.

troseberry
24 Sep 2010, 6:07 AM
can you show the code of the existing panel on how its getting created, rendered, and child items are being added

timg
24 Sep 2010, 6:11 AM
the existing panel


pimcoreViewport = new Ext.Viewport({
id: "pimcore_viewport",
layout:'fit',
items:[
{
xtype: "panel",
id: "pimcore_body",
cls: "pimcore_body",
layout: "border",
border: false,
tbar: {
id: "pimcore_panel_toolbar",
xtype: "toolbar",
border: false
},
items: [
{
region:'west',
id:'pimcore_panel_tree',
split:true,
width: 250,
minSize: 175,
maxSize: 400,
collapsible: true,
layout:'accordion',
layoutConfig:{
animate:false
},
forceLayout: true,
items: []
},
new Ext.TabPanel({
region:'center',
deferredRender:false,
id: "pimcore_panel_tabs",
enableTabScroll:true,
defaults: {autoScroll:true},
cls: "tab_panel"
})
],
bbar: statusbar
}
],

Tries



Ext.getCmp("document_"+ object.id).items.itemAt(1).insert(99,{
xtype: "tabpanel",
title: "TEST",
forceLayout: true,
items: [
Ext.getCmp("document_"+ object.id).items.itemAt(1).items.itemAt(0), // without this line it works finne
Ext.getCmp("document_"+ object.id).items.itemAt(1).items.itemAt(1),
Ext.getCmp("document_"+ object.id).items.itemAt(1).items.itemAt(2),
Ext.getCmp("document_"+ object.id).items.itemAt(1).items.itemAt(3),
Ext.getCmp("document_"+ object.id).items.itemAt(1).items.itemAt(4),
Ext.getCmp("document_"+ object.id).items.itemAt(1).items.itemAt(5),
Ext.getCmp("document_"+ object.id).items.itemAt(1).items.itemAt(6),
Ext.getCmp("document_"+ object.id).items.itemAt(1).items.itemAt(7)
]
});


//items : xt.getCmp("document_"+ object.id).items.itemAt(1).items crash too

troseberry
24 Sep 2010, 6:45 AM
How are these tabs being created? Are they all predefined? Is [tabpanel] dynamically added to the TabPanel and then the [tab1,2 3] added dynamically to the [tabpanel]?

[tabpanel]
[tab1][tab2][tab3]

timg
24 Sep 2010, 7:41 AM
[MY TABPANEL]
[MY Tab]

are dynamic, but the items of [tabpanel] should be items of [MY Tab].