1. #1
    Sencha User
    Join Date
    May 2010
    Posts
    6
    Vote Rating
    0
    sdo044 is on a distinguished road

      0  

    Default About TabPanel

    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?

    Code:
    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);
        }
    });
    Last edited by aconran; 6 May 2010 at 7:04 AM. Reason: wrapping code tag

  2. #2
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,487
    Vote Rating
    139
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default

    Quote Originally Posted by sdo044 View Post
    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.
    Aaron Conran
    @aconran

Thread Participants: 1