Dec 05, 2011, 12:25 PM
Controls in collapsed 'FieldSet' control are not rendered correctly, if they have a parent 'Panel' control
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%--
Brief explanation of problem
Controls in collapsed 'FieldSet' control are not rendered correctly, if they have a parent 'Panel' control
For Example:
- GridPanel in FieldSet -> missing bottom toolbar
- ...
- or this example
// ---------------------------------------------
-Form
-Div
-Panel
-FieldSet (collapsed=true)
-Panel
-Toolbar
-FileUpload Control -> width not correctly rendered
// ---------------------------------------------
-Form
-Div
-FieldSet (collapsed=true)
-Panel
-Toolbar
-FileUpload Control -> OK
--%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<%--solves the problem with not correctly rendered 'browse' button in the toolbar (IE8, IE9) --%>
<style type="text/css">
.ext-ie .button-fix table.x-btn,
.ext-gecko .button-fix table.x-btn{
top:0px;
}
.ext-ie .button-fix .x-form-text,
.ext-gecko .button-fix .x-form-text{
margin-top:1px;
}
</style>
</head>
<body>
<form id="form2" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<div>
<ext:Panel runat="server" ID="panelMain">
<Items>
<%--
If I set 'Collapsed="true" the width of the upload text field is not rendered correctly
The problem is the outer panel 'panelMain'
If I set 'Collapsed="false" or remove the outer panel 'panelMain' everything works fine.
I have removed unnecessary controls to analyze the problem.
--%>
<ext:FieldSet runat="server" ID="fieldSet" Collapsed="true" Collapsible="true" Title="Dummy text">
<Items>
<ext:Panel ID="Panel1" runat="server">
<Items>
<%--...--%>
</Items>
<TopBar>
<ext:Toolbar runat="server" ID="toolbar">
<Items>
<ext:FileUploadField ID="fileUploadField" runat="server" Icon="Attach" Width="500">
</ext:FileUploadField>
<%--...--%>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</Items>
</ext:FieldSet>
<%--...--%>
</Items>
</ext:Panel>
</div>
</form>
</body>
</html>
Last edited by geoffrey.mcgill; Dec 05, 2011 at 2:14 PM.
Reason: please use [CODE] tags