Results 1 to 2 of 2

Thread: nested tabPanels, dinamically added tabPanel don't show its components

  1. #1

    Question nested tabPanels, dinamically added tabPanel don't show its components

    Hi!
    First: really great job guys! Ext is wonderfull!

    Well, about my problem... I add dinamically new tabs to a TabPanel. That tabs has another TabPanel inside. So I have two levels TabPanel.

    My problem is that I can't show the content of the second level of tabs. Tabs are blank.

    So... how should I to make tabs render the form inside them? In the doc it's explained that rendering is lazyness, but I can't understand how override that behaviour or how I can be sure the components I need to show are rendered immediately. In the examples I havn't found something similar to what I need.

    I post an example of what I've done.


    HTML Code:
    <body>
        <a id="addTab" 
              onclick="tabPanel.add({ title:'New tab', items: [ getInnerTabPanel() ] }).show();" 
              href="#"
        >Add tab</a>
        
        <div id='tabs'></id>
    </body>
    Code:
    getInnerTabPanel = function(){
    
        var innerTabPanel = new Ext.TabPanel({
            deferredRender:false,
            autoScroll: true,
            collapsible:true,
            activeTab: 0,
            items:     [
                    {    // form Details
                        title: 'Details',
                        layout:'form',
                        defaultType: 'textfield',
                        width: 600,
                        height: 200,
                        items : [     
                                { fieldLabel: 'name', name: 'name' },
                                { fieldLabel: 'surname', name: 'surname' }
                             ]
                    }
                ]
        });
    
        return innerTabPanel;
    
    }
    
    Ext.onReady(function(){
    
        tabPanel = new Ext.TabPanel({
            renderTo:'tabs',
            deferredRender:false,
            activeTab: 0,
            width: 600,
            height: 400,
            items:[
                {
                   title:'Wellcome',
                   html:'Wellcome to my exemple'
                }    
            ]
        });
    });
    Thanks.

  2. #2

    Default

    ok, I've resolved.

    I had just to add tabPanel.doLayout() at the end of onclick.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •