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