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

      0  

    Default About TabPanel

    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 - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,359
    Vote Rating
    128
    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
    Sencha Architect Development Team

Thread Participants: 1