PDA

View Full Version : Viewport Not Resizing Regions



Supial
1 Jan 2010, 10:50 PM
Greetings,
I am using a Viewport which contains two panels, North and Center. The North panel contains a panel based on content (ie.: contentEl: 'myContentDiv') plus one or more other panels that are added at runtime (not via config). The North panel is a BorderLayout as well. The Center panel is a BorderLayout which contains West and Center panels.

The problem is that the North panel does not show all of it's contents after other components have been added. I do not know how the North panel determines and sets it's height, but since I am using a Viewport, I didn't think any resize coding is needed.

Here is a sample:
layout-app.js


Ext.onReady(function(){

Ext.QuickTips.init();
var banner = new Ext.Panel({
region: 'center',
layout: 'fit',
autoHeight: true,
contentEl: 'myContentDiv',
border: false
});
var navbar = new Ext.Panel({
region: 'bottom',
layout: 'border',
});
var west = new Ext.Panel({
title: 'west',
region: 'west',
split: true
});
var contents = new Ext.Panel({
title: 'center',
region: 'center'
});
var north = new Ext.Panel({
id: 'northRoot',
region: 'north',
layout: 'border',
border: false,
margins: '0 2 4 2',
items: [ banner, navbar ]
});
var center = new Ext.Panel({
id: 'centerBorder',
region: 'center',
layout: 'border',
border: true,
bodyStyle: 'padding: 8px;',
margins: '1 2 2 1',
items: [west, contents]
});
navbar.add(new Ext.Panel({ title: 'navbar' }));
var vp = new Ext.Viewport({
layout: 'border',
items: [north, center]
});
vp.render('viewport');
});


HTML


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS Layout Examples</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="../../ext-all.js"></script>
<!-- overrides to base library -->
<script type="text/javascript" src="layout-app.js"></script>
</head>
<body>
<!-- Start page content -->
<div id="myContentDiv">
<div style="float:left;" ><img src="images/layout-icon.gif" /></div>
<div style="margin-left:100px;">
<h2>Welcome!</h2>
<p>There are many sample layouts to choose from that should give you a good head start in building your own
application layout. Just like the combination examples, you can mix and match most layouts as
needed, so don't be afraid to experiment!</p>
<p>Select a layout from the tree to the left to begin.</p>
</div>
</div>
<div id="viewport"></div>
</body>
</html>

Any thoughts?
Thanks

Animal
2 Jan 2010, 12:43 AM
You do not render a Viewport.

It manages the whole document body.



The Viewport renders itself to the document body...

Supial
2 Jan 2010, 9:05 AM
Yes, exactly. So why is the Viewport not resizing the North panel properly? If the Viewport is to manage the document body, then I would assume this involves resizing of regions as well.

If this is not the case, then I need to manually adjust the North panel to fit it's contents, however, I do not believe that should be the case.

The example I provide shows a North panel, but the contents are not fully visible. Viewport should manage the size properly. How can this be done, or is this a bug with the Viewport component?

Cheers,
Marcel

Animal
3 Jan 2010, 12:48 AM
OK, don't accept help.

Bye.

Supial
3 Jan 2010, 1:28 AM
I'm sorry did I miss something? What help was provided?



You do not render a Viewport.

It manages the whole document body.


I'm not sure, but I believe your stating the obvious. Even if the ".render()" method call is removed, the problem still occurs.
I'm expecting the Viewport to manage the document body, but (as seen in my supplied example) this doesn't seem to be the case. Possibly because my North region contains a Panel that uses content from other HTML elements and the Viewport can't resize properly.

Thanks for any assistance.
Marcel

Supial
4 Jan 2010, 11:33 AM
If you look at the examples provided by ExtJS, there is a sample called "layout-manager" which is what I am basing my example on. The difference in the example is that the North panel gets a panel added during runtime.

When this is done, the Viewport never resizes that region properly.

Any idea when the Panel's DIV element will have all children rendered? I can then set the panel's height manually.

Thanks,
Marcel

zhegwood
4 Jan 2010, 12:47 PM
You can't have html in the <body> tag if you're using a viewport. Something like this:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS Layout Examples</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="../../ext-all.js"></script>
<!-- overrides to base library -->
<script type="text/javascript" src="layout-app.js"></script>
</head>
<body>

</body>
</html>

<script type='text/javascript'>

Ext.onReady(function(){

Ext.QuickTips.init();
var banner = new Ext.Panel({
region: 'center',
layout: 'fit',
autoHeight: true,
//contentEl: 'myContentDiv', //this won't work if you're using a viewport
border: false
});
var navbar = new Ext.Panel({
region: 'bottom',
layout: 'border',
});
var west = new Ext.Panel({
title: 'west',
region: 'west',
split: true
});
var contents = new Ext.Panel({
title: 'center',
region: 'center'
});
var north = new Ext.Panel({
id: 'northRoot',
region: 'north',
layout: 'border',
border: false,
margins: '0 2 4 2',
items: [ banner, navbar ]
});
var center = new Ext.Panel({
id: 'centerBorder',
region: 'center',
layout: 'border',
border: true,
bodyStyle: 'padding: 8px;',
margins: '1 2 2 1',
items: [west, contents]
});
navbar.add(new Ext.Panel({ title: 'navbar' }));
var vp = new Ext.Viewport({
layout: 'border',
items: [north, center]
});
});
</script>

CrazyEnigma
4 Jan 2010, 1:45 PM
There is no need to use the render call, because the Viewport object already does the rendering. Most already do. You can specify a div id to renderTo.

The problem you are facing is that you need to specify a height for any north or south regions, and a width for any east or west regions.

The Viewport uses the border layout style, so follow the API on this.