PDA

View Full Version : Fit layout not working



Mandeep
11 Nov 2009, 11:30 AM
Can somebody please tell me why following panel won't expand to take 100% space in my window. I am using IE7.

<script type="text/javascript">

Ext.onReady(function()
{
var panel = new Ext.Panel({
title: 'Fit Layout',
layout:'fit',
items: {
html: '<p>This is the inner panel content</p>',
border: true
}
});

panel.render('panel-div');
});

</script>

</head>

<body>

<div id="panel-div" style='width:100%; height:100%;background:yellow; border: 1 solid black'>

</div>

</body>

</html>

Animal
11 Nov 2009, 11:39 AM
Use a Viewport.

Mandeep
11 Nov 2009, 11:47 AM
I am using a border layout and then there is a tabbed pane in the center. I am opening an ext window in one of the tabs and then I am adding a panel(which contains a grid) to a layer on this window. If the panel is Ext.Panel then it gets added to the window but if I use a viewport then it gets added to the main body of the document and shows up behind the tabs and my window. This is the reason I am trying to use the Ext.Panel but it doesn't work.

Animal
11 Nov 2009, 12:14 PM
That makes no sense.

Mandeep
11 Nov 2009, 1:44 PM
Is it true that Viewport always takes the entire browser space irrespective of the container? Please try the following code and you will see that inner viewport never appears, probably its hiding behind the main panel.

<html>
<head>
<script type="text/javascript">
Ext.onReady(function()
{
var panelMain = new Ext.Viewport({
layout: 'border',
items:
[
{
region:'north',
html: '<p>This is the north pane</p>',
title:'North',
autoScroll:true,
border:true,
iconCls:'nav',
height:200
},
{
region:'south',
title:'South',
html: '<p>This is the south pane</p>',
border:true,
autoScroll:true,
iconCls:'settings',
height:200
},
{
region:'center',
title:'Center',
border:true,
autoScroll:true,
iconCls:'settings',
items: panel
//html: '<p>This is the Center pane</p>'
},
{
region:'east',
title:'East',
html: '<p>This is the east pane</p>',
border:true,
autoScroll:true,
iconCls:'settings',
width:200
},
{
region:'west',
title:'West',
html: '<p>This is the West pane</p>',
border:true,
autoScroll:true,
iconCls:'settings',
width:200
}
]
});

var panel = new Ext.Viewport({
title: 'Fit Layout',
layout:'fit',
items: {html:"This is inner viewport with fit layout"}
});
panelMain.render('panel-div');
});
</script>
</head>
<body>

<div id="panel-div" style='width:50%; height:50%; background:yellow; border: 1 solid black'></div>
</body>
</html>

mschwartz
11 Nov 2009, 2:05 PM
You can only have one viewport.

Everything else is some sort of Ext.Panel.

Mandeep
12 Nov 2009, 9:23 AM
Can somebody please tell me how to size my page so that it takes whole space inside a Ext window without using a Viewport?
Thanks.

carol.ext
12 Nov 2009, 10:54 AM
I do not see an Ext window in the code you have posted. What are you trying to put in a window and how?