PDA

View Full Version : Border layout works in Ext.Viewport and does not work in Ext.Panel.... WHY?



jumpow
17 Jun 2013, 11:54 PM
Next code works
<!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: 'Alfa IVR Statistic',
launch: function()
{
Ext.BLANK_IMAGE_URL='extjs/resources/s.gif';
var portal = new Ext.Viewport(
{
layout: 'border',
items:
[
{
title: 'West Region is resizable',
id: 'JSWest',
region: 'west', // position for region
width: 300,
split: true,
collapsible: true,
minSize: 75,
maxSize: 450,
layout: 'vbox',
margins: '0 2 2 2',
html: 'this is west region'
},
{
title: 'Center Region',
id: 'JSCenter',
region: 'center',
layout: 'vbox',
margins: '2 2 0 0',
html: 'this is center region'
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>

If I replace Viewport by Panel, I have empty screen (IE, FireFox)... Why?

<!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: 'Alfa IVR Statistic',
launch: function()
{
Ext.BLANK_IMAGE_URL='extjs/resources/s.gif';
var portal = new Ext.Panel(
{
renderTo: document.body,
width: '100%',
height: '100%',
layout: 'border',
items:
[
{
title: 'West Region is resizable',
id: 'JSWest',
region: 'west', // position for region
width: 300,
split: true,
collapsible: true,
minSize: 75,
maxSize: 450,
layout: 'vbox',
margins: '0 2 2 2',
html: 'this is west region'
},
{
title: 'Center Region',
id: 'JSCenter',
region: 'center',
layout: 'vbox',
margins: '2 2 0 0',
html: 'this is center region'
}
]
});
}
});
</script>
</head>
<body>
<div id="SJPageMenu"></div>
</body>
</html>

tvanzoelen
18 Jun 2013, 12:57 AM
Viewport streches automatcally to the available size. Panels do not, you have to set the width and height in pixel notation. 100% will probably not work.

jumpow
18 Jun 2013, 3:49 AM
I changed to
width: '400px',
height: '400px',
and it now show panel.

But it is rendered to document body
renderTo: document.body,
So, it have to fill all browser area... How?

tvanzoelen
18 Jun 2013, 3:55 AM
If you want to fit the whole browser it is better to use the viewport, because it calculates the window size for you. Else you have to do it yourself, so why not use the viewport in that case?

You can set the layout of the viewport to fit and add your panel. I think thatīs the best option you have.

You must see the viewport as your main window.