-
Ext JS Premium Member
Fit layout not working
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>
-
-
Ext JS Premium Member
Viewport
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.
-
-
Ext JS Premium Member
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>
-
You can only have one viewport.
Everything else is some sort of Ext.Panel.
-
Ext JS Premium Member
I need width:100% and Height:100%
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.
-
I do not see an Ext window in the code you have posted. What are you trying to put in a window and how?
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
