PDA

View Full Version : Reg: Dynamic rendering tabs in the tab panel



dev_java
24 Jun 2010, 1:19 AM
Hi All,

I am trying to create an application which has header panel,footer panel , west panel, center panel.

I have created a view port for this. In the center region, i have added a tab panel,tabs.
On rendering of the view port , i have to dynamically add tabs to the tab panel based on a certain value.
I have declared a variable datavalue. If 'datavalue' is 'tools' , then i have to add Tools tab to TabPanel or else i have to add Security tab.


var toolsPanel =new Ext.Panel({
frame:true,
title:'Tools',
layout: 'fit'

});

var securityPanel =new Ext.Panel({
frame:true,
title:'Security',
layout: 'fit'

});

var dataValue = 'tools';

var tabs = new Ext.TabPanel({
activeTab:0,
items:[toolsPanel,securityPanel] // This has to be done dynamically on rendering the viewport
});

Ext.onReady(function() {

Ext.QuickTips.init();

var viewport = new Ext.Viewport({
id:'simplevp'
,layout:'border'
,border:false
,items:[{
region:'north'
,height:75
,border:false
,bodyStyle:'background-color:#f4f4f4;'
,html:'Header'
,collapsible:false

},{
region:'west'
,width:200
,border:false

,html:'West'
,bodyStyle:'background-color:#f0f0f0;'
,collapsible:true
,layout:'fit'
},{
region:'south'
,html:'Footer'
,border:false
,collapsible:false
},{
region:'center'
,border:false
,xtype:'panel'
,layout:'fit'
,bodyStyle:'background-color:#f0f0f0;'
,items:[tabs]
}]
});




});

Can any one help me on this?


Expecting help on this ....
Thanks

Animal
24 Jun 2010, 1:34 AM
This is coursework is it?

dev_java
24 Jun 2010, 1:49 AM
Hi,

Its not course work. I am trying out ExtJs myself.. Learning ExtJs by taking examples from net and with ExtJs API .

I have tried out with viewport.on('beforerender') . But dint work out.

Thanks.

Animal
24 Jun 2010, 1:56 AM
I'm not sure I understand all your complication.

I'd just use



var tabItems = [ <whatever you need to use as tab items> ];

...
}, {
region: 'center',
xtype: 'tabpanel',
items: tabItems
}, {
...

dev_java
24 Jun 2010, 2:32 AM
I have problem in adding the items to to tabItems. Before rendering the viewport, i have call some function say CreateTab() which creates the tab items based on the data value. I am not able to do that.

I tried adding a simple panel using viewport beforerender event. But that also not working



viewport.on('beforerender',function(){

var tp = viewport.items.itemAt(3);
var tab = tp.add({
title:'Panel'
,html:'Simple panel '

});


}
);

Animal
24 Jun 2010, 3:08 AM
Why a problem?

Just call createTab, and add the result into the tabItems array,

(BTW, by convention, only class names are capitalized, methods are not)