Could you give me suggest about create tab dynamic [Archive]

vicent

13 May 2007, 8:16 AM

Hi all ~
I have study the tab example on the ext document , I think the way it create tab dynamic is good , but now , I want to make the tab nested on the complex layout , I don't know how to make it work

var layout;

layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 32,
titlebar: false
},
west: {
split:true,
initialSize: 170,
minSize: 170,
maxSize: 400,
titlebar: true,
collapsible: true,
autoScroll:true,
animate: true
},
south: {
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true,
animate: true
},
east: {
split:true,
initialSize: 360,
minSize: 360,
maxSize: 360,
titlebar: true,
collapsible: true,
animate: true
},
center: {
titlebar: true,
autoScroll:true,
closeOnTab: true,
}
});
};

............
............ ///
innerLayout = new Ext.BorderLayout('inner-layout', {
center: { autoScroll:true}
});

var tabs = new Ext.TabPanel('tabs1');
tabs.addTab('jtabs-1', "Normal Tab", "My content was added during construction.");
tabs.activate(0);

layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('north', 'North'));
layout.add('south', new Ext.ContentPanel('south', {title: '', closable: true}));
layout.add('west', new Ext.ContentPanel('west', { title: '',fitToFrame:true}));
layout.add('east',new Ext.ContentPanel('east', {title: '', closable: false}));
innerLayout.add('center',new Ext.GridPanel(event_grid));
innerLayout.add('center',tabs);/// it can not work
layout.add('center', new Ext.NestedLayoutPanel(innerLayout));
layout.endUpdate();

the html code
<body>
<script type="text/javascript" src="resources/examples.js"></script>
<div id ="container">
<div id="west" class="x-layout-inactive-content"></div>
<div id="east" class="x-layout-inactive-content"></div>
<div id="north" class="x-layout-inactive-content"></div>
<div id="south" class="x-layout-inactive-content"></div>
<DIV id="inner-layout" class="x-layout-inactive-content"></div>
<div id="tabs1"></div>
</div>
</body>

how can I add the tab to the nested layout ?

Animal

13 May 2007, 10:51 AM

Just add ContentPanels to the Region you want (eg "center"). Each one will be converted to a tab.

vicent

13 May 2007, 5:13 PM

Just add ContentPanels to the Region you want (eg "center"). Each one will be converted to a tab.

yes ,I know your meaning , but I want to add a tab when user click a " build " button , if I just add a contentPannels , it need add <div> tag each times , So I think it will be more easier if it can add a tabPannel to it ?

could you show me a good way please ?

Animal

13 May 2007, 10:56 PM

I'm not going to do your job.

Create a ContentPanel and add that.

http://extjs.com/deploy/ext/docs/output/Ext.ContentPanel.html

and

http://extjs.com/deploy/ext/docs/output/Ext.ContentPanel.html#config-autoCreate

Just try!