May 30, 2008, 12:41 PM
[CLOSED] MinHeight for Panel
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
Example
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>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);
}
}
}
}
});
