View Full Version : [CLOSED] MinHeight for Panel

May 30, 2008, 12:41 PM
Here's a quick sample demonstrating how to create a Panel which automatically grows (height) based on the size of the content, but will also shrink down to a minimum height. By default the AutoHeight property will cause the body of the Panel to shrink down to nothing if there's no content/html.

The MinHeight is acheived by adding a Resize Listener and performing a simple height check, then set a new height if the current height is less than a default value.


<%@ Page Language="C#" %>

<%@ Register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" tagprefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>MinHeight Panel</title>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<ext: Panel
Title="My MinHeight Panel"
<Resize Handler="if(el.getInnerHeight() < 200){el.autoHeight = false; el.setHeight(200);}" />
Line<br />
Line<br />
Line<br />
</ext: Panel>

The following demonstrates how to create the Panel in raw JavaScript. Running the following code in Firebug will create a Panel.


var panel1 = new Ext.Panel({
autoHeight: true,
title: "My MinHeight Panel",
renderTo: Ext.getBody(),
listeners: {
resize: {
fn: function(el, adjWidth, adjHeight, rawWidth, rawHeight) {
if (el.getInnerHeight() < 200) {
el.autoHeight = false;

Hope this helps.

Sep 11, 2008, 11:34 PM

do you have a sample code for the following. I have a west and center region. in the West Region, accordion display links. when you click a link, i would like to create a new tab with a close button and then display an aspx page or some html. i can use an iframe in the tab.
can you help.

Sep 12, 2008, 11:36 AM
Hi idrissb,

Please start a new thread with your request. We need to keep one thread per topic or we loose track of what has (and has not) been solved.