Results 1 to 8 of 8

Thread: Can a TabPanel contain two TabPanels side by side?

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    15

    Default Can a TabPanel contain two TabPanels side by side?

    I have a TabPanel that contains two other TabPanels, and I want them to lay side by side inside the parent TabPanel (one on the left and one on the right). I tried to use the HBOX layout, but it said, "Object doesn't support this property or method." Is there any work around for this? Any help would be appreciated.
    Thanks,

    -nuskin

  2. #2
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    589

    Default

    In the examples directory of my local Ext JS 3.3.1, I edited the tabs-examples.js to look like the code pasted below and believe this is what your looking for. I clicked preview and it submitted the post. Now I can't go advanced on editing this post so will include the screen shot below this post.

    I usually use a container to do layouts without adding unnecessary borders. But hbox layout works fine with the container and with the 2 other tabpanels being the children of the container. Just one other note from the UI design side, it might be better to put tabs 1-4 on the bottom with tabPosition: 'bottom' or put the parent tab on the bottom then it doesn't get as confusing from a user's point of view.

    PHP Code:
    var tabs2 = new Ext.TabPanel({
            
    renderTodocument.body,
            
    activeTab0,
            
    width:600,
            
    height:250,
            
    plain:true,
            
    defaults:{autoScrolltrue},
            
    items:[{
                    
    title'Parent Tab',
                    
    xtype'container',
                    
    layout'hbox',
                    
    height250,
                    
    items: [{
                        
    xtype'tabpanel',
                        
    activeTab0,
                        
    flex1,
                        
    plaintrue,
                        
    borderfalse,
                        
    height224,
                        
    items:[
                            { 
    title'Tab1'frame:truehtml'tab1'},
                            { 
    title'Tab2'frame:truehtml'tab2'}
                        ]
                    }, {
                        
    xtype'tabpanel',
                        
    activeTab0,
                        
    flex1,
                        
    plaintrue,
                        
    borderfalse,
                        
    height224,
                        
    items:[
                            {
    title'Tab3'frame:truehtml'tab3'},
                            {
    title'Tab4'frame:truehtml'tab4'}
                        ]
                    }]
            }]
        }); 

  3. #3
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    589

    Default

    Like I said I think this is what your looking for.
    Attached Images Attached Images

  4. #4
    Sencha User
    Join Date
    Feb 2011
    Posts
    15

    Default

    Thanks aw1zard2! I got it working now. By any chance do you have a solution to add the horizontal scrollbar inside the Parent Tab that can contain two or more TabPanels that will enable the user to scroll accross to the right to see Tab5 or Tab6, etc... for example?

  5. #5
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    589

    Default

    I would do a tab scrolling or tab scroller menu so your parent can stay same size and you wouldn't need any horizontal scroll bars. Check out the Ext JS 3.3.1 examples. They should get you in the right direction.

    Glad it's working.

  6. #6
    Sencha User
    Join Date
    Feb 2011
    Posts
    15

    Default Error: 'myTabContainer.activeTab.id' is null or not an object

    Hi,

    I have a <DIV id="TabContainer" /> in my HTML document.
    I want to create a TabPanel that contains two TabPanels (namely alertTab and subTabContainer, see codes below). The title of my TabPanel is dynamically generated; so, when I run the codes below, I got "Error: 'myTabContainer.activeTab.id' is null or not an object." Any helps would be appreciated.
    Thanks,

    -Nuskin

    //**************************************************************************
    Ext.onReady(function(){
    // Create the tab container
    var myTabContainer = new Ext.TabPanel ({
    activeTab: 0,
    renderTo: 'TabContainer',
    hideBorders: true,
    border: false,
    height: 350,
    width: 1274,
    items: [
    <xsl:for-each select="/Root/Item">
    <xslort select="@Title" />
    <xsl:if test="position() != 1">,</xsl:if>
    {
    <xsl:choose>
    <xsl:when test="@Rank='0.0'">
    title: '&lt;span>&lt;img src="my0.gif" />&#160;<xsl:value-of select="@Title"/>&lt;/span>'
    </xsl:when>
    <xsl:when test="@Rank='1.0'">
    title: '&lt;span>&lt;img src="my1.gif" />&#160;<xsl:value-of select="@Title"/>&lt;/span>'
    </xsl:when>
    <xsl:otherwise>
    title: '&lt;span><xsl:value-of select="@Title"/>&lt;/span>'
    </xsl:otherwise>
    </xsl:choose>,
    xtype: 'container',
    layout: {type: 'hbox', align: 'stretch'},
    items: [ {
    xtype: 'container',
    flex: 3,
    layout: {type: 'hbox', align: 'stretch'},
    items: [ alertTab ]
    },
    {
    xtype: 'container',
    flex: 9,
    layout: {type: 'hbox', align: 'stretch'},
    items: [ subTabContainer ]
    }
    ]
    }
    </xsl:for-each>
    ]
    });
    });

Similar Threads

  1. Form with fields side by side without specifying widths
    By JavaDude in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 2 Mar 2010, 5:08 AM
  2. Trying to get a radio button and textfield side-by-side ...
    By wgpubs in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 5 May 2009, 8:02 AM
  3. [Solved]Side-by-side Grids in a TableLayout not working
    By fzammetti in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 22 Jan 2009, 10:42 AM
  4. Close button for window comming on left side instead of right side
    By prakash.halan in forum Community Discussion
    Replies: 8
    Last Post: 26 Nov 2008, 6:26 AM
  5. What is the best practice to get two form elements side by side?
    By gopunk in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 19 Feb 2008, 10:50 PM

Posting Permissions

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