PDA

View Full Version : Problems with border layout in Tab Panel



jumpow
24 Jul 2013, 1:10 AM
There are two questions
1. If I set in ViewPort "layout: 'vbox'" (see code), I get empty screen (without errors). Why?
"layout: 'vbox'" works, if I set height of TabPanel to number (not 100%)

2. How can I make TabPanel filling full browser user area?
If I set "height: '100%'", I get empty tab (without errors)

ExtJS 4.2, FireFox 22.0, IE 8
-----------------------------
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<link rel='stylesheet' type='text/css' href='extjs/resources/css/ext-all.css'>
<script type='text/javascript' src='extjs/ext-all-debug.js'></script>

<script type="text/javascript">
Ext.application(
{
name: 'Statistic',
launch: function()
{
Ext.BLANK_IMAGE_URL='extjs/resources/s.gif';

var usParamsPanel = Ext.create('Ext.panel.Panel',
{
width : '100%',
layout: 'hbox',
border: 0,
margins: '4 4 5 5',
items:
[
{ html: "West region", margins: '2 2 2 2', border: 0
}
]
});
var usPanel = Ext.create('Ext.panel.Panel',
{
id: 'UsersPanel',
width: '100%',
height: 600, //=100% Causes empty tab
layout: 'border',
items:
[
{
title: 'Users',
id: 'USWest',
region: 'west',
width: 300,
split: true,
collapsible: true,
minSize: 75,
maxSize: 450,
layout: 'vbox',
margins: '0 2 2 2',
autoScroll:true,
items:
[
usParamsPanel
]
},
{
id: 'USCenter',
region: 'center',
layout: 'vbox',
margins: '2 2 0 0',
autoScroll:true,
items:
[
{ html: "Center region", margins: '2 2 2 2', border: 0
}
]
}
]
});

var repTabs = new Ext.TabPanel(
{
activeTab: 0,
width:'100%',
height: '100%', // if in Ext.Viewport set layout: 'vbox', it produce empty screen (without errors))
//height: 600, // for set layout: 'vbox',
items:
[
{
title: 'Users',
items:
[
usPanel
]
},
{
title: 'Reports',
items:
[
{ html: "Reports", margins: '2 2 2 2', border:0, height:400, width: 400
}
]
}
]
});

var portal = new Ext.Viewport(
{
layout: 'hbox',
items:
[
repTabs
]
});
}
});
</script>
</head>
<body>

</body>
</html>

asankaub
24 Jul 2013, 2:52 AM
you can set to fullscreen using


var viewport = new Ext.Viewport({ id:'bgBody',
margins: '5 5 5 0',
layout:'fit'
});

jumpow
24 Jul 2013, 4:21 AM
Nothing changed...
Did you tried it for yourself?

asankaub
24 Jul 2013, 4:47 AM
did u set that in the view port. you need to set in there.

jumpow
24 Jul 2013, 5:05 AM
Next changes was made:
var portal = new Ext.Viewport(
{
//layout: 'hbox',
layout:'fit',
items:
[
repTabs
]
});
Once again, did you tried to check your answer on YOUR computer?

slemmon
30 Jul 2013, 3:32 PM
Try with the below example. I pulled the dimensions off of the items managed by an owner container's layout and removed an overnested panel (the usPanel was owned by an unnecessary panel - just make usPanel the tab itself).



Ext.application({
name: 'Statistic',
launch: function () {


var usParamsPanel = Ext.create('Ext.panel.Panel', {
width: '100%',
layout: 'hbox',
border: 0,
margins: '4 4 5 5',
items: [{
html: "West region",
margins: '2 2 2 2',
border: 0
}]
});
var usPanel = Ext.create('Ext.panel.Panel', {
id: 'UsersPanel',
title: 'Users',
layout: 'border',
items: [{
title: 'Users',
id: 'USWest',
region: 'west',
width: 300,
split: true,
collapsible: true,
minSize: 75,
maxSize: 450,
layout: 'vbox',
margins: '0 2 2 2',
autoScroll: true,
items: [
usParamsPanel
]
}, {
id: 'USCenter',
region: 'center',
layout: 'vbox',
margins: '2 2 0 0',
autoScroll: true,
items: [{
html: "Center region",
margins: '2 2 2 2',
border: 0
}]
}]
});


var repTabs = new Ext.TabPanel({
activeTab: 0,
items: [usPanel, {
title: 'Reports',
items: [{
html: "Reports",
margins: '2 2 2 2',
border: 0
}]
}]
});


var portal = new Ext.Viewport({
layout: 'fit',
items: [
repTabs
]
});
}
});

jumpow
1 Aug 2013, 10:34 PM
Thank you.
It now work.

WitteStier
1 Sep 2014, 1:53 PM
bodyStyle: {
border: 0
},