Hi all.
I'm new here. It's a few months that I've started to use ext. Now, I've found a strange behavior. Searching in the forum don't solve my question.

The problem is when I create an empty tab-panel and at runtime I add some panels and active it. At first show() or doLayout() or render() I get on the screen ALL the content at the same time.

You can get a look to the example. In the example I've put 4 different tab-panel: the buggy one, a workaround that I've found, some other tries and a working case.

Now, maybe I've done something worng (I'm a beginner...), but I really can't get a solution...
Thanks for any helps.

Example:
PHP Code:
<html>
<
head>
    <
meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >
    <
link href="extjs/resources/css/ext-all.css" media="screen" rel="stylesheet" type="text/css" >
    <
script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="extjs/ext-all.js"></script>

    <script type="text/javascript">
Ext.onReady(function() {
    //----------------- NORMAL ADD ------------------------//
    //Rational way. Don't works. Add a div panel regardless//
    // the 'display' status, that's always show. Buggy?    //

    var myTab1=new Ext.TabPanel( {
            renderTo : 'test1',
            height : 150,
            autoScroll : true
    });

    var tab11 = myTab1.add({
        title : 'Bug-Tab1',
        html : 'First one'
    });

    var tab12 = myTab1.add({
        title : 'Bug-Tab2',
        html : 'Second one'
    });

    var tab13 = myTab1.add({
        title : 'Bug-Tab3',
        html : 'Another one'
    });

    myTab1.setActiveTab(tab12.getId());
    myTab1.doLayout();

    //----------------- FIX METHOD ------------------------//
    //Workaround:first adds an empty panel, than onActivate//
    // loads the content.                                  //

    var myTab2=new Ext.TabPanel( {
            renderTo : 'test2',
            height : 150,
            autoScroll : true
    });

    var tab21 = myTab2.add(new Ext.Panel({
        title : 'Fix-Tab1',
        layout : 'fit',
        listeners : {
            activate : function (p) {
                p.add( {
                    html : 'first one'
                });
                p.ownerCt.doLayout();
                //p.removeListener(...);
            }
        }
    }));

    var tab22 = myTab2.add(new Ext.Panel({
        title : 'Fix-Tab2',
        layout : 'fit',
        listeners : {
            activate : function (p) {
                p.add( {
                    html : 'second one'
                });
                p.ownerCt.doLayout();
                //p.removeListener(...);
            }
        }
    }));

    var tab23 = myTab2.add(new Ext.Panel({
        title : 'Fix-Tab3',
        layout : 'fit',
        listeners : {
            activate : function (p) {
                p.add( {
                    html : 'another one'
                });
                p.ownerCt.doLayout();
                //p.removeListener(...);
            }
        }
    }));

    myTab2.setActiveTab(tab22.getId());
    myTab2.doLayout();

    //----------------- NICE TRY ------------------------//
    // Some other tries ...                              //

    var myTab3=new Ext.TabPanel( {
            renderTo : 'test3',
            height : 150,
            autoScroll : true
    });

    var tab31 = myTab3.add(new Ext.Panel({
        title : 'Try-Tab1',
        layout : 'fit',
        items : [{
            html : 'first one'
        }]
    }));

    var tab32 = myTab3.add(new Ext.Panel({
        title : 'Try-Tab2',
        layout : 'fit'
    }));
    tab32.add( {
        html : 'second one'
    });
    myTab3.doLayout();

    var tab33 = myTab3.add(new Ext.Panel({
        title : 'Try-Tab3',
        layout : 'fit',
        items : [{
            html : 'another one'
        }]
    }));

    myTab3.setActiveTab(tab32.getId());
    myTab3.doLayout();

    //----------------- BAD FIX ------------------------//
    //A crappy fix: works only for the first or the last//
    //activating ALL the tabs (or only the first...)    //
    var myTab4=new Ext.TabPanel( {
            renderTo : 'test4',
            height : 150,
            autoScroll : true
    });

    var tab41 = myTab4.add({
        title : 'Fkx-Tab1',
        html : 'First one'
    });
    myTab4.setActiveTab(tab41.getId());

    var tab42 = myTab4.add({
        title : 'Fkx-Tab2',
        html : 'Second one'
    });
    myTab4.setActiveTab(tab42.getId());

    var tab43 = myTab4.add({
        title : 'Fkx-Tab3',
        html : 'Another one'
    });
    myTab4.setActiveTab(tab43.getId());
    myTab4.doLayout();

});

    </script>
</head>
<body>
<div id="test1"></div><br><hr><br>
<div id="test2"></div><br><hr><br>
<div id="test3"></div><br><hr><br>
<div id="test4"></div><br>
</body>
</html>