1. #1
    Ext User
    Join Date
    May 2010
    Posts
    3
    Vote Rating
    0
    nikochan is on a distinguished road

      0  

    Default Some problem adding panel at runtime

    Some problem adding panel at runtime


    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> 

  2. #2
    Sencha User
    Join Date
    Nov 2008
    Posts
    48
    Vote Rating
    0
    shaluniska is on a distinguished road

      0  

    Default


    try:

    1. pnl.doLayout().
    2. pnl.setActiveTab(...);

  3. #3
    Ext User
    Join Date
    May 2010
    Posts
    3
    Vote Rating
    0
    nikochan is on a distinguished road

      0  

    Default


    I'm sorry,
    this problem was fixed in version 3.2.1 ...
    I still have version 3.2.0 .

    Thanks all.

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi