About TabPanel

[sdo044]

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]

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.