PDA

View Full Version : Auto resize Panel in a DIV



vIceBerg
10 Oct 2009, 11:47 AM
Hi!

I'm a newby in the ExtJS world. I read a lot of stuff, watched all the screencasts from tgd-i.com but there's something I do not get right now.

It's a very simple example, and I'm sure it has been discussed before, but my search talent did not point me to the answer I'm looking for.

In a nutshell:
I have a legacy website.
I want to add a Panel inside an existing DIV in that page.
The DIV height is set to 100% of the page
I want the Panel to fill the DIV and auto resize when the browser is resized.

The Panel fits the width, but not the height. I tried playing with layouts... but I got the same result.

Can a wiser guy than me points what I'm doing wrong and what I do not understand?

Thanks a lot.

Here's an example HTML of what I'm trying:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="http://127.0.0.1/extjs/resources/css/ext-all.css">
<style type="text/css">
html
{
height: 90%;
}
body
{
height: 90%;
background-color: Aqua;
}
#header
{
height: 80px;
background-color: Gray;
}
#menuPanel
{
height: 100%;
width: 250px;
background-color: Fuchsia;
}
</style>
<script type="text/javascript" src="http://127.0.0.1/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://127.0.0.1/extjs/ext-all-debug.js"></script>
<title id="page-title">Title</title>
<script type="text/javascript">
Ext.onReady(onReady);

function onReady()
{
var myPanel = new Ext.Panel({
renderTo: 'menuPanel',
title: 'Menu',
autoHeight: false,
anchor: '0 0',
height: 100
});
}
</script>
</head>
<body>
<div id="header">My header goes here</div>
<div id="menuPanel"></div>
</body>
</html>

mitchellsimoens
10 Oct 2009, 5:22 PM
Is the height about 90% of the page?

vIceBerg
10 Oct 2009, 10:38 PM
Hi!

The DIV height is 90% of the page, but the panel fills only about 20% of the DIV height, depending of the content.

Animal
10 Oct 2009, 11:19 PM
Use a Viewport with layout: 'border'

#header is the north
#menuPanel is the center

vIceBerg
10 Oct 2009, 11:25 PM
The Viewport will be rendered in the body, thus replacing all the content. I can't change all the layout. I just want to fill a DIV with a panel.

Animal
11 Oct 2009, 2:51 AM
No, you can use pre-existing HTML elements as regions of the Viewport.

The example in your SDK's examples directory does just that.

As does a client of mine right now. They have a "decorative" bit of HTML as the north region, and proper Ext Components in the south.