[SOLVED] Tab Panel Layout Puzzle

[JosephHarriman]

Hello,

I'm having problems getting my child components to expand properly inside of a tab panel. This was easy in ExtJS 3 but not in 4. I've tried many, many layout configurations but none will work.

This one seemed to make the most sense. autoHeight is no longer supported in ExtJs v4.x. Instead, you should rely on the layout system to get the desired effect.

The most common solution to the problem you're having is to use a Viewport (with 'border' layout) and add your Tab Panel as the 'center' region.

I'm posting the code where I am trying this, but once again, it does not expand. Can someone please look at this and give me a clue. Thanks for any help.

Ext.onReady(function() {
    var innerContainer1 = Ext.create('Ext.container.Container', {

        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            xtype: 'container',
            flex: 1,
            layout: { 
                type: 'hbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'panel',
                title: '1',
                flex: 1},
            {
                xtype: 'panel',
                title: '2',
                flex: 1}]},
        {
            xtype: 'container',
            flex: 1,
            layout: { 
                type: 'hbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'panel',
                title: '3',
                flex: 1},
            {
                xtype: 'panel',
                title: '4',
                flex: 1}]},
        {
            xtype: 'container',
            flex: 1,
            layout: { 
                type: 'hbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'panel',
                title: '5',
                flex: 1},
            {
                xtype: 'panel',
                title: '6',
                flex: 1}]},
        {
            xtype: 'container',
            flex: 1,
            layout: { 
                type: 'hbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'panel',
                title: '7',
                flex: 1},
            {
                xtype: 'panel',
                title: '8',
                flex: 1}]}]
    });
    
    var innerContainer2 = Ext.create('Ext.container.Container', {

        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            xtype: 'container',
            flex: 1,
            layout: { 
                type: 'hbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'panel',
                title: '9',
                flex: 1},
            {
                xtype: 'panel',
                title: '10',
                flex: 1}]},
        {
            xtype: 'container',
            flex: 1,
            layout: { 
                type: 'hbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'panel',
                title: '11',
                flex: 1},
            {
                xtype: 'panel',
                title: '12',
                flex: 1}]},
        {
            xtype: 'container',
            flex: 1,
            layout: { 
                type: 'hbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'panel',
                title: '13',
                flex: 1},
            {
                xtype: 'panel',
                title: '14',
                flex: 1}]},
        {
            xtype: 'container',
            flex: 1,
            layout: { 
                type: 'hbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'panel',
                title: '15',
                flex: 1},
            {
                xtype: 'panel',
                title: '16',
                flex: 1}]}]
    });
    
    var innerContainer3 = Ext.create('Ext.container.Container', {

        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            xtype: 'container',
            flex: 1,
            layout: { 
                type: 'hbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'panel',
                title: '17',
                flex: 1},
            {
                xtype: 'panel',
                title: '18',
                flex: 1}]},
        {
            xtype: 'container',
            flex: 1,
            layout: { 
                type: 'hbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'panel',
                title: '19',
                flex: 1},
            {
                xtype: 'panel',
                title: '20',
                flex: 1}]},
        {
            xtype: 'container',
            flex: 1,
            layout: { 
                type: 'hbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'panel',
                title: '21',
                flex: 1},
            {
                xtype: 'panel',
                title: '22',
                flex: 1}]},
        {
            xtype: 'container',
            flex: 1,
            layout: { 
                type: 'hbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'panel',
                title: '23',
                flex: 1},
            {
                xtype: 'panel',
                title: '24',
                flex: 1}]}]
    });
    
    
	// Create Tab panel
	var allTabs = Ext.create('Ext.tab.Panel',{
		id: 'allTabs',
		region: 'center',
		activeTab: 0,		
		autoDestroy:false,
		closeable:false,				
		items:[{
			   title:'Tab 1',
			   id:"TeamPerf",
			   items:[innerContainer1]
			  },{
			   title:'Tab 2',
			   id:"TeamBoard",
			   items:[innerContainer2]
			  },{
			   title:"Tab 3",
			   id:"TeamCrisis",
			   items:[innerContainer3]
			  }]			  
	});
	
	
	
    var viewPort = Ext.create('Ext.container.Viewport', {
        layout: 'border',
        defaults: {
            split: true
        },
        items: allTabs,
        renderTo: Ext.getBody()
    });
})

[eweiler]

Have you tried putting your innner containers as the items in your tab panel instead of putting them in your items with the default xtype (xtype not supplied). You can add the title and an itemId config directly on the innercontainers. (try avoiding id)

If that doesn't help, can you try including a screenshot of the results you are getting?

Another thing would be to try putting height on some objects and letting the flex be for the one you want to stretch to fill the space.

[JosephHarriman]

Thanks Eric,

It was the nesting of the items in the tab panel that was causing the problem. I'll have one in your honor this weekend.