1. #1
    Sencha User rkraus's Avatar
    Join Date
    Dec 2011
    Location
    Bonn / Germany
    Posts
    68
    Vote Rating
    0
    rkraus is an unknown quantity at this point

      0  

    Default Unanswered: TabPanel in another TabPanel

    Unanswered: TabPanel in another TabPanel


    Hi,

    I got problems with multible TabPanels which are items of each others.
    Here is my example Code (I kept it simple to explain my problem)

    Code:
    Ext.application({
    	name: 'Sencha',
    
    
    	launch: function() {
    		Ext.create("Ext.TabPanel", {
    			fullscreen: true,
    			tabBarPosition: 'bottom',
    			items: [
    			{
    				title: 'Tab1',
    				html: "Tab1"
    			},
    			{
    				title: 'Tab2',
    				items:
    				[
    					Ext.create("Ext.TabPanel", {
    						tabBarPosition: 'top',
    						items: [
    							{
    								title: 'SubTab A',
    								html: 'SubTab A'
    							},
    							{
    								title: 'SubTab B',
    								items:
    								[
    									Ext.create("Ext.TabPanel", {
    										tabBarPosition: 'bottom',
    										items:
    										[
    											{
    												title: 'SubTab B1',
    												html: 'SubTab B1'
    											},
    											{
    												title: 'SubTab B2',
    												html: 'SubTab B2'
    											}
    										]
    									})
    								]
    							}
    						]
    					})
    				]
    			}
    		]
    });
    }
    });
    As You can see there is a mainpanel (TabPanel) with Tab1 / Tab2 on it.
    Tab2 is holding another 2 Tabs (SubTabA and SubTab. But when I trigger SubTabB the third TabPabel don´t comes up :-(

    Did I make something wrong?

    Greetings,

    Ralf

  2. #2
    Sencha User rkraus's Avatar
    Join Date
    Dec 2011
    Location
    Bonn / Germany
    Posts
    68
    Vote Rating
    0
    rkraus is an unknown quantity at this point

      0  

    Default


    Got it myself :-(

    Code:
    Ext.application({
    	name: 'Sencha',
    
    
    	launch: function() {
    		Ext.create("Ext.TabPanel", {
    			fullscreen: true,
    			tabBarPosition: 'top',
    			items: [
    			{
    				title: 'Tab1',
    				html: "Tab1"
    			},
    			{
    				title: 'Tab2',
    				layout: 'card',
    				items:
    				[
    					Ext.create("Ext.TabPanel", {
    						tabBarPosition: 'top',
    						items: [
    							{
    								title: 'SubTab A',
    								html: 'SubTab A',
    								layout: 'card'
    							},
    							{
    								title: 'SubTab B',
    								items:
    								[
    									Ext.create("Ext.TabPanel", {
    										tabBarPosition: 'top',
    										items:
    										[
    											{
    												title: 'SubTab B1',
    												html: 'SubTab B1',
    												layout: 'card'
    											},
    											{
    												title: 'SubTab B2',
    												html: 'SubTab B2',
    												layout: 'card'
    											}
    										]
    									})
    								]
    							}
    						]
    					})
    				]
    			}
    		]
    });
    }
    });
    Adding a layout (card) did the trick ;-)