1. #1
    Ext User
    Join Date
    Jul 2008
    Posts
    11
    Vote Rating
    0
    rameshc is on a distinguished road

      0  

    Default Why do I get "st is undefined" error? Also, how do I get the 2nd level tabs to show?

    Why do I get "st is undefined" error? Also, how do I get the 2nd level tabs to show?


    In my 2-level tabs experiment, I am running into these 2 problems:

    1. I get an "st undefined" error in firebug, which I believe is for the 2nd level tabs (the ones created in the for-loop).

    2. Unless I specify a height for the top-level panel, the 2nd level panels don't show. I don't want to specify a height since I want the outside panel to get resized (and become scrollable if needed) when clicking on the 2nd level results in loading lengthy content.

    Any help on both/either of these issues will be greatly appreciated. The code is pasted below (please note that the tab addition work happens in a JSon load handler callback in my application. I am doing it serially here to isolate the problem).

    Code:
    Ext.onReady(function(){
     
       var p = new Ext.Panel({
            title:'MultiLevel Tabs test',
            renderTo: 'container',
            layout: 'column',
            footer: true,
            items: [{
                    region: 'west',
                    id: 'west-panel',
                    title: 'External Links',
                    layout: 'accordion',
                    width: 200,
                    height: 700,
                    html:'  test junk in the west panel'
                },
                {
                    region: 'center',
                    xtype: 'tabpanel',
                    id: 'center-panel',
                    columnWidth: 1,
                    plain:true,
                    defaults:{autoScroll: true}
                },
                {
                    region: 'east',
                    id: 'east-panel',
                    title: 'Search',
                    layout: 'accordion',
                    width: 200,
                    html:'  test junk in the east panel'
                }
           ]
       });
     
        var l1Panel = Ext.getCmp('center-panel');
     
        var l2Panel = l1Panel.add({xtype: 'tabpanel', title: 'Added Tab', deferredRender : false, activeTab: 0 });
        for (j = 0; j < 5; j++) {
            l2Panel.add({xtype: 'tabpanel', title: j, html: 'Placeholder Text for second level tab'});
        }
    });
    HTML Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
      <title>Knowledge Base</title>
        <link rel="stylesheet" type="text/css" href="ext-2.1/resources/css/ext-all.css"></link>
        <link rel="stylesheet" type="text/css" href="Templates/cskb.css"></link>
        <script language="javascript" type="text/javascript" src="ext-2.1/adapter/ext/ext-base.js"></script>
        <script language="javascript" type="text/javascript" src="ext-2.1/ext-all-debug.js"></script>
     
        <script language="javascript" type="text/javascript" src="2leveltab.js"></script>
     
    </head>
    <body>
        <div id="container">
        </div>
     </body>
    </html>

  2. #2
    Ext User deanna's Avatar
    Join Date
    Aug 2007
    Location
    Alabama
    Posts
    306
    Vote Rating
    0
    deanna is on a distinguished road

      0  

    Default


    The st undefined is because you are adding tabpanels instead of panels. I made a couple changes that will lighten up the DOM a bit, but the one that gets rid of the error is changing tabpanel to panel.


    PHP Code:
    Ext.onReady(function(){

       var 
    = new Ext.Viewport({
            
    title:'MultiLevel Tabs test',
            
    layout'column',
            
    footertrue,
            
    items: [{
                    
    region'west',
                    
    id'west-panel',
                    
    title'External Links',
                    
    layout'accordion',
                    
    width200,
                    
    height700,
                    
    html:'  test junk in the west panel'
                
    },
                {
                    
    region'center',
                    
    xtype'tabpanel',
                    
    id'center-panel',
                    
    columnWidth1,
                    
    plain:true,
                    
    height600,
                    
    defaults:{autoScrolltrue}
                },
                {
                    
    region'east',
                    
    id'east-panel',
                    
    title'Search',
                    
    layout'accordion',
                    
    width200,
                    
    html:'  test junk in the east panel'
                
    }
           ]

       });


        var 
    l1Panel Ext.getCmp('center-panel');

        var 
    l2Panel l1Panel.add({xtype'tabpanel'title'Added Tab'deferredRender falseactiveTab});
        for (
    05j++) {
            
    l2Panel.add({xtype'panel'titlejhtml'Placeholder Text for second level tab'});
        }
        
    l1Panel.setActiveTab(l2Panel); 

  3. #3
    Ext User
    Join Date
    Jul 2008
    Posts
    11
    Vote Rating
    0
    rameshc is on a distinguished road

      0  

    Default Thanks! That takes care of the first problem

    Thanks! That takes care of the first problem


    In your fix, you set the height of the first level tabpanel to 600. Now, when I click on the 2nd level panel to load a url into the panel, it is restricted to 600 pix. I want the center panel to expand (elongate) to fit all the contents of the url into it, and, if needed, to make the container (the top level panel that get rendered to the "container") to become scrollable. I tried a few height config. parameters, but it didn't seem to work.

  4. #4
    Ext User deanna's Avatar
    Join Date
    Aug 2007
    Location
    Alabama
    Posts
    306
    Vote Rating
    0
    deanna is on a distinguished road

      0  

    Default


    That should have fixed the tab not displaying also. I added the setActiveTab call at the bottom that should cause it to be active and display.

    For the height try 'auto'.

  5. #5
    Ext User
    Join Date
    Jul 2008
    Posts
    11
    Vote Rating
    0
    rameshc is on a distinguished road

      0  

    Default Your tip to call ActivateTab works, but height is a problem.

    Your tip to call ActivateTab works, but height is a problem.


    Setting height to 'auto' in the first level panel prevents the 2nd level tabs from showing. Setting height to 'auto' in the seconds level panel has no effect.

  6. #6
    Ext User deanna's Avatar
    Join Date
    Aug 2007
    Location
    Alabama
    Posts
    306
    Vote Rating
    0
    deanna is on a distinguished road

      0  

    Default


    If you change the top level layout from column to border and remove the 2nd level height altogether, it fixes the height problem. If that won't work for you, give the 2nd level tab a style with a height=100%

Thread Participants: 1

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..."