PDA

View Full Version : About TabPanel



sdo044
5 May 2010, 8:57 PM
Hi, I am using TabPanel in Ext Designer. For the UI js, it generates the following code which render the whole tab panel at one time. Is there any method that can render the first tab at start and render the object in other tabs only when the that tab is clicked?



MyTabsUi = Ext.extend(Ext.TabPanel, {
activeTab: 1,
width: 562,
height: 444,
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'Tab 1',
items: [
{
xtype: 'fieldset',
title: 'My Fields',
layout: 'table',
height: 300,
defaults: {
style: 'margin:5px;',
border: true
},
layoutConfig: {
columns: 3
},
items: [
{
xtype: 'textfield',
fieldLabel: 'Label',
name: 'Test1'
},
{
xtype: 'button',
text: 'Click it',
ref: '../../confirmBtn'
}
]
}
]
},
{
xtype: 'panel',
title: 'Tab 2',
items: [
{
xtype: 'panel',
title: 'My Panel',
height: 416,
frame: true,
layout: 'table',
layoutConfig: {
columns: 2
},
items: [
{
xtype: 'panel',
title: 'My Panel',
width: 300,
height: 500
},
{
xtype: 'panel',
title: 'My Panel',
height: 500,
width: 260
}
]
}
]
},
{
xtype: 'panel',
title: 'Tab 3'
}
];
MyTabsUi.superclass.initComponent.call(this);
}
});

aconran
6 May 2010, 7:05 AM
Is there any method that can render the first tab at start and render the object in other tabs only when the that tab is clicked?

This is the default behavior. You do not need to do anything to get this type of functionality. If you prefer to turn this off, you can use the deferredRender configuration and set it to false.