Results 1 to 7 of 7

Thread: Tab in Tab content will be not shown

  1. #1
    Sencha User
    Join Date
    Jul 2010
    Location
    DE
    Posts
    13

    Default Tab in Tab content will be not shown

    Dear all,

    I have a tab in a tab, mainTab and subTab.
    mainTab has 4 tabs and loads via ajax a simple navigation and a div-id-holder.
    If this navigation will be clicked subTab with a grid and edit-form will be loaded.

    The problem is now, that this works fine in the first tab of mainTab, but if the mainTab will be changed, the subTab will be loaded but not shown.
    Firebug show everything in the console, but it will be not shown in the browser itself.

    Using of disableCaching or else does not help.

    The source code is hughe for posting it here.

    Thanks for helping.

    Regrads
    metan

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791

    Default

    Without any source code we're really going to struggle to help you. Reducing your complex code down to a simple test case is a key part of the investigative process; you'll probably figure out what the problem is without even needing to post it here.

    You may also find it helpful to dig in with Firebug to figure out why the elements aren't showing up. It'll probably be because a container element is 'display: none' or 'height: 0'. It would help greatly to have that information.

    Speculating wildly, have you tried the layoutOnTabChange config option?

  3. #3
    Sencha User friend's Avatar
    Join Date
    Apr 2011
    Posts
    895

    Default

    Also be sure that you have activeTab: 0 for all TabPanel instances. Otherwise, you'll see no content when the TabPanels are rendered.

    I don't know if you'll find this helpful, but here's a functional example of a TabPanel with child TabPanels that appear to work as expected (where static content is used in the child tabpanels for simplicity):

    Code:
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="ext/resources/css/xtheme-blue.css" id="theme" />
        <link rel="stylesheet" type="text/css" href="css/layout.css" />
        
        <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext/ext-all.js"></script>
        
        <script type="text/javascript">
          Ext.onReady(function() {
            Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
            Ext.QuickTips.init();
           
            var txt = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.';
            
            var tab1 = {
              xtype: 'panel',
              title: 'Tab 1',
              items: [{
                xtype: 'tabpanel',
                activeTab: 0,
                items: [{
                  xtype: 'panel',
                  title: 'SubTab 1 - 1',
                  html: txt
                },{
                  xtype: 'panel',
                  title: 'SubTab 1 - 2',
                  html: txt
                },{
                  xtype: 'panel',
                  title: 'SubTab 1 - 3',
                  html: txt
                }]
              }]
            };
    
            var tab2 = {
              xtype: 'panel',
              title: 'Tab 2',
              items: [{
                xtype: 'tabpanel',
                activeTab: 0,
                items: [{
                  xtype: 'panel',
                  title: 'SubTab 2 - 1',
                  html: txt
                },{
                  xtype: 'panel',
                  title: 'SubTab 2 - 2',
                  html: txt
                },{
                  xtype: 'panel',
                  title: 'SubTab 2 - 3',
                  html: txt
                }]
              }]
            };
            
            var tab3 = {
              xtype: 'panel',
              title: 'Tab 3',
              items: [{
                xtype: 'tabpanel',
                activeTab: 0,
                items: [{
                  xtype: 'panel',
                  title: 'SubTab 3 - 1',
                  html: txt
                },{
                  xtype: 'panel',
                  title: 'SubTab 3 - 2',
                  html: txt
                },{
                  xtype: 'panel',
                  title: 'SubTab 3 - 3',
                  html: txt
                }]
              }]
            };
    
            var tabpanel = {
              xtype: 'tabpanel',
              activeTab: 0,
              region: 'center',
              items: [tab1, tab2, tab3]
            };
            
            var viewport = new Ext.Viewport({
              layout: 'border',
              items: [{
                xtype: 'panel',
                region: 'north',
                frame: true,
                height: 70,
                html: '<span style="font-size: 24px;">Tabs Gonna Tab    </span>',
                title: 'North Region'
              },
                tabpanel
              ,{
                xtype: 'panel',
                region: 'south',
                frame: true,
                height: 50,
                html: '&copy;2011, MonkeyPooperMan, Inc.',
                title: 'South Region'
              }]
            });
          });
        </script>
      </head>
      <body>
      </body>
    </html>

  4. #4
    Sencha User
    Join Date
    Jul 2010
    Location
    DE
    Posts
    13

    Default

    Hi,

    Here is my source code

    MainTab:
    Code:
    <script type='text/javascript'>
        var mainEditTabs;
        Ext.onReady(function(){
            mainEditTabs=new Ext.TabPanel({
                renderTo:'mainEditTabs',
                autoWidth:true,
                activeTab:'###ACTIVE_TAB###',
                plain:true,
                hideBorders:true,
                border:false,
                xtype:'iframepanel',
                frame:true,
                defaults:{autoHeight:true},
                items:[
                    {contentEl:'idMainEditDasboardTab',
                        itemId:'idMainEditDasboard',
                        title:'Start',
                        listeners:{
                            activate:function(tabPanel,newTab){
                                Ext.shWaitingBox();
                                tabPanel.getUpdater().update({
                                    url:'index.php',
                                    params:function() {
                                        var parameter='eID=shEditViewMainTab&tx_extshmainfe_pi1[shEditViewMainTab]=dashboard';
                                        return parameter;
                                    },
                                    scripts: true
                                });
                            },
                        }},
                    {contentEl:'idMainEditExtrasTab',
                        itemId:'idMainEditExtras',
                        title:'Angebote',
                        listeners:{
                            activate:function(tabPanel,newTab){
                                Ext.shWaitingBox();
                                tabPanel.getUpdater().update({
                                    url:'index.php',
                                    params:function() {
                                        var parameter='eID=shEditViewMainTab&tx_extshmainfe_pi1[shEditViewMainTab]=extras';
                                        return parameter;
                                    },
                                    scripts: true
                                });
                            }
                        }
                    },
                    {contentEl:'idMainEditPortraitTab',
                        itemId:'idMainEditPortrait',
                        title:'Portrait-Inhalte bearbeiten',
                        listeners:{
                            activate:function(tabPanel,newTab){
                                Ext.shWaitingBox();
                                tabPanel.getUpdater().update({
                                    url:'index.php',
                                    params:function() {
                                        var parameter='eID=shEditViewMainTab&tx_extshmainfe_pi1[shEditViewMainTab]=portrait';
                                        return parameter;
                                    },
                                    scripts: true
                                });
                            }
                        }
                    },
                    {contentEl:'idMainEditMembershipTab',
                        itemId:'idMainEditMembership',
                        title:'Mitgliedschaft',
                        listeners:{
                            activate:function(tabPanel,newTab){
                                Ext.shWaitingBox();
                                tabPanel.getUpdater().update({
                                    url:'index.php',
                                    params:function() {
                                        var parameter='eID=shEditViewMainTab&tx_extshmainfe_pi1[shEditViewMainTab]=membership';
                                        return parameter;
                                    },
                                    scripts: true
                                });
                            }
                        }}
                ]
            });
        });
    </script>
    <div class="span-1">&nbsp;</div>
    <div class="span-22">
        <h1>###HEADER###</h1>
        <p>###WELCOME###</p>
        <div id="mainEditTabs">
            <div id="idMainEditDasboardTab" class="x-hide-display"></div>
            <div id="idMainEditExtrasTab" class="x-hide-display"></div>
            <div id="idMainEditPortraitTab" class="x-hide-display"></div>
            <div id="idMainEditMembershipTab" class="x-hide-display"></div>
        </div>
    </div>
    <div class="span-1">&nbsp;</div><hr /><div class="clearboth"></div>
    Here the subTab code (there 12 differen content elements with same js, diff. parametes):
    Code:
     
    <br /><h2>Gutscheine</h2><br />
    <div id="subTabsEditView">
        <div id="idEditListViewTab" class="x-hide-display"></div>
        <div id="idEditInsertViewTab" class="x-hide-display"></div>
    </div>
    <script type='text/javascript'>
    var subTabsEditView;
    var idForEdit=0;
    var toDoAction='';
    Ext.onReady(function(){
        subTabsEditView=new Ext.TabPanel({
            renderTo:'subTabsEditView',
            autoWidth:true,
            activeTab:0,
            plain:true,
            hideBorders:true,
            border:false,
            //xtype:'iframepanel' ,
            //frame:true,
            defaults:{autoHeight:true},
            enableTabScroll : true,
            //resizeTabs      : true,
            minTabWidth : 75,
            items:[
                {contentEl:'idEditListViewTab',
                itemId:'idEditListView',
                title:'Auflisten',
                listeners:{
                    activate:function(tabPanel,newTab){
                        Ext.shWaitingBox();
                        tabPanel.getUpdater().update({
                            url:'index.php',
                            params:function() {
                                var parameter='eID=shEditView&tx_extshmainfe_pi1[shEditVar]=coupon&tx_extshmainfe_pi1[view]=listview';
                                return parameter;
                            },
                            scripts: true
                        });
                    }
                }
            },
            {contentEl:'idEditInsertViewTab',
                itemId:'idEditInsertView',
                title:'Neu Eintragen / Editieren',
                listeners:{
                    activate:function(tabPanel,newTab){
                        Ext.shWaitingBox();
                        tabPanel.getUpdater().update({
                            url:'index.php',
                            params:function() {
                                var parameter='eID=shEditView&tx_extshmainfe_pi1[shEditVar]=coupon&tx_extshmainfe_pi1[view]=insertNew';
                                if(idForEdit!=0 && idForEdit!=''){
                                    parameter=parameter+'&tx_extshmainfe_pi1[idForEdit]='+idForEdit;
                                    if(idForEdit > 0){
                                        idForEdit=0;
                                    }
                                    else{
                                        idForEdit='';
                                    }
                                }
                                if(toDoAction!=''){
                                    parameter=parameter+'&tx_extshmainfe_pi1[toDoAction]='+toDoAction;
                                    toDoAction='';
                                }
                                return parameter;
                            },
                            scripts: true
                        });
                    }
                }
            }
            ]
        });
     });</script>
    ###ACTIVE_TAB### will be overwritten via php. so this is always set by the name of the tab id.

    For loading the subTab, i use a navigation (will be loaded by the mainTab) with this function:

    [CODE]
    //Get the modul via ajax for editing its content
    function getShEditVar(shEditVar, idShEditVar) {
    var url = "index.php";
    var params = "eID=shEditView&tx_extshmainfe_pi1[shEditVar]=" + shEditVar;
    var idShEditVarDOM = Ext.get(idShEditVar);
    idShEditVarDOM.getUpdater().update({
    url: url,
    params: params,
    scripts: true,
    callback: function(el, success, response, options) {
    if(response.responseText.length > 0){
    idShEditVarDOM.show();
    }
    else {
    alert('ERROR');
    }
    }
    });
    }
    [CODE]

    Thanks for your help.

    Metan

  5. #5
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791

    Default

    Reducing your complex code down to a simple test case is a key part of the investigative process; you'll probably figure out what the problem is without even needing to post it here.
    That's far too much code for us to be able to figure out what the problem is. If I try to run that locally it'll take me hours to get it to work.

    A few things that caught my eye. Your TabPanel has an xtype of 'iframepanel', which doesn't seem right. autoHeight and contentEl are both potential candidates for the problems you're seeing. Overall the way your doing this seems excessively complicated, I'd advise ditching all of the contentEl stuff, just have the renderTo on the outermost component with an explicitly set height.

  6. #6
    Sencha User
    Join Date
    Jul 2010
    Location
    DE
    Posts
    13

    Default

    Hi,

    I have tried all your suggestion and there is still the same problem.
    After switching to an other tab the next loaded + grid will be not shown, but normal html will be shown.

    I have send you a private message. Please give me a short answer.

    Thank you in advance.

    Metan

  7. #7
    Sencha User
    Join Date
    Jul 2010
    Location
    DE
    Posts
    13

    Default

    It works now.
    I use for every tab its own div-id.

    Thanks to all.
    metan

Tags for this Thread

Posting Permissions

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