PDA

View Full Version : [CLOSED] MinHeight for Panel



geoffrey.mcgill
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.

Example


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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

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

Example


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;
el.setHeight(200);
}
}
}
}
});

Hope this helps.

idrissb
Sep 11, 2008, 11:34 PM
Geoff

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.
thanks

geoffrey.mcgill
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.