PDA

View Full Version : Layout border in Ext.tab.Panel



icemanovich
17 Nov 2011, 5:17 AM
Hi,
I'm try to use border layout inside Ext.tab.Panel, but it doesn't work. Regions did not appear. But if I remove "layout: border" regions are rendered like a hbox layout.
Can anyone tell me why?

Here is my code:


Ext.onReady(function() {
Ext.create('Ext.tab.Panel', {
layout : {

type : 'border',

padding: 5

},

renderTo: document.body,
activeTab: 2,
items: [{
title: 'Tab1',
html: 'text'
},{
title: 'Tab2',
id : 'tabInfo',
layout: {
type: 'table',
columns: 3
},
defaults: {frame: true, width: 400, height: 200, margin: '5 5 5 5'}
},{
title: 'Tab3',
height : "300",
layout:{
type: 'border',
padding: 5
},
items : [{
region: 'north',
title: 'North',
html: 'north'
},{
region: 'center',
collapsible: false,
title: 'center',

height: 100,
minHeight: 60,
html: 'center',
},{
region: 'west',
collapsible: true,
title: 'Starts at width 30%',
split: true,
width: '30%',
minWidth: 100,
minHeight: 140,
html: 'west<br>I am floatable'
}]
},{
title: 'Tab4',
html: 'Text.'
}
});
});


Regards.

tvanzoelen
17 Nov 2011, 5:30 AM
A TabPanel has a fixed card layout, else it isn't a tabpanel. If you want to use a border layout then you can better take a normal panel.

KingWarin
17 Nov 2011, 5:39 AM
Another thing is that (like discribed in the API http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Border ) layout: 'border' must have a child with " region:'center' "

cheers

tvanzoelen
17 Nov 2011, 5:57 AM
Yes you must specify a center, but you can not specify
layout : {
type : 'border',
padding: 5
},

on a tabpanel, only on its tabs so far I know because a tabpanel has a card layout. But even if you can you havent specified any region on your tabpanel items.

tvanzoelen
17 Nov 2011, 6:06 AM
Below works as expected, you only forgot a bracket at your fourth tab




Ext.onReady(function() {
Ext.create('Ext.tab.Panel', {
layout : {
padding: 5
},
renderTo: document.body,
activeTab: 2,
items: [{
title: 'Tab1',
html: 'text'

},{
title: 'Tab2',
id : 'tabInfo',
layout: {
type: 'table',
columns: 3
},
defaults: {frame: true, width: 400, height: 200, margin: '5 5 5 5'}
},{
title: 'Tab3',
height : "300",

layout:{
type: 'border',
padding: 5
},
items : [{
region: 'north',
title: 'North',
html: 'north'
},{
region: 'center',
collapsible: false,
title: 'center',

height: 100,
minHeight: 60,
html: 'center'
},{
region: 'west',
collapsible: true,
title: 'Starts at width 30%',
split: true,
width: '30%',
minWidth: 100,
minHeight: 140,
html: 'west<br>I am floatable'
}]
},{
title: 'Tab4',
html: 'Text.'
}] // <--you forgot to close the item array
});
});

icemanovich
17 Nov 2011, 10:02 PM
Below works as expected, you only forgot a bracket at your fourth tab

It was Ctrl+C - Ctrl+V error )

icemanovich
17 Nov 2011, 10:57 PM
Thanks for your advice. I change my code and it works. But I have one more question.. How can i fill the whole region in tab? I want layout like 'fit' on each tab.panel, but i need to set height property.



Ext.create('Ext.tab.Panel', {
layout : {
type : 'fit',
padding: 5
},
renderTo: document.body,
activeTab: 2,
items: [{
title: 'Management',
html: '<br /> Text text text'
},{
title: 'Info',
id : 'tabInfo',
layout: {
type: 'table',
columns: 3
}
},{
title: 'Stats',
//height : "600",
//layout : 'fit',
items : [
{
region: 'center',
collapsible: false,
title: 'center',
height: '900',
minHeight: 60,
layout: 'border',
items: [
{
title: 'South Region',
region: 'south',
xtype: 'panel',
height: 100,
split: true,
margins: '0 5 5 5'
},{
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
split: true,
width: 200,
id: 'west-region-container',
layout: 'fit'
},{
title: 'Center Region',
region: 'center',
xtype: 'panel',
split : true,
layout: 'fit',
margins: '5 5 0 0'
}]
}]
},{
title: 'Log',
html: 'This tab is not ready yet.'
}]
});

tvanzoelen
18 Nov 2011, 12:16 AM
layout : {
type : 'fit'
},


above on a tabpanel will not work, tabpanel has a fixed card layout you can not change. You can specify a default layout for its children under the defaults property.

I think fit will work if you add a new panel or component to that tab like



{
title: 'Center Region',
region: 'center',
xtype: 'panel',
split: true,
layout: 'fit',
items:[{ html: 'hello'}],
margins: '5 5 0 0'
}

icemanovich
18 Nov 2011, 12:44 AM
Thank you for your reply, but it was not my problem. I decided to use Ext.viewPort with tabs and inside 3rd tab I paste a new central region with items to automatically fill all tab's area and all works (it seems :) ).


Ext.create('Ext.container.Viewport', {
id: 'appViewPort',
layout:{
type: 'border',
padding: 5
},
items: [
{
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 2, // Third tab active by default
items: [
{
title: 'Manage',
html: 'Text tex text'
},{
title: 'Info',
id : 'tabInfo',
layout: {
type: 'table',
columns: 3
},
defaults: {frame: true, width: 400, height: 200, margin: '5 5 5 5'}
},{
title: 'Stat',
region: 'center',
collapsible: false,
//height: '500',
layout: 'border',
items: [
{
title: 'South Region',
region: 'south',
xtype: 'panel',
split: true,
autoScroll : true,
margins: '0 5 5 5',
items :[simpleGrid]
},{
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
split: true,
width: 200,
id: 'west-region-container',
layout: 'fit'
},{
title: 'Center Region',
region: 'center',
xtype: 'panel',
split : true,
layout: 'fit',
margins: '5 5 0 0'
}]
},{
title: 'Log',
html: 'This tab is not ready yet.'
}]
}]
});


Here is my result:
29393