View Full Version : Auto resize Panel in a DIV

10 Oct 2009, 11:47 AM

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:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="">
<style type="text/css">
height: 90%;
height: 90%;
background-color: Aqua;
height: 80px;
background-color: Gray;
height: 100%;
width: 250px;
background-color: Fuchsia;
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<title id="page-title">Title</title>
<script type="text/javascript">

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

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

10 Oct 2009, 10:38 PM

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

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

#header is the north
#menuPanel is the center

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.

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.