May 16, 2011, 4:14 PM
[CLOSED] Layout in ext.net drives me mad - "Stretch" a TabPanel/Panel and its contents fails if within a UserControl?
The thing that takes the most time for me in ext.net is without a question layout:ing. I never seem to get it right, and I end up with endless of "trial-and-error" to get it right, and usually I end up here to ask for help cause I dont get it right.
This time I have this scenario:
1 <ext:Window> that contains a <ext:TabPanel>. That TabPanel has two <ext:Panel> where the first contains a PropertyGrid and the second a UserControl (that really is just GridPanel).
The problem is with the UserControl in the second Panel, the GridPanel (in the UserControl) does NOT "strech" all the way out. However, if I remove the UserControl and place the GridPanel directly in the second Panel - it streches and resizes as expected.
Why does the usages of a UserControl mess it all up?
This is how it looks with the UserControl:
This is the code WITHOUT the UserControl:
This time I have this scenario:
1 <ext:Window> that contains a <ext:TabPanel>. That TabPanel has two <ext:Panel> where the first contains a PropertyGrid and the second a UserControl (that really is just GridPanel).
The problem is with the UserControl in the second Panel, the GridPanel (in the UserControl) does NOT "strech" all the way out. However, if I remove the UserControl and place the GridPanel directly in the second Panel - it streches and resizes as expected.
Why does the usages of a UserControl mess it all up?
This is how it looks with the UserControl:
This is the code WITHOUT the UserControl:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
</script>
<!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 id="Head1" runat="server">
<title>Ext.NET Examples</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Window runat="server" ID="WindowDetails" Title="test" Width="550" Height="500" Hidden="false">
<Items>
<ext:TabPanel ID="TabPanel1" runat="server" AutoHeight="true" AutoWidth="true" Border="true">
<Items>
<ext:Panel runat="server" ID="tabPage1" Title="test1" AutoHeight="true" Layout="FitLayout" Border="true" MonitorResize="true">
<Items>
<ext:PropertyGrid runat="server" ID="PropertyGrid1" AutoHeight="true">
<View>
<ext:GridView ID="GridView2" runat="server" ScrollOffset="0" ForceFit="true">
</ext:GridView>
</View>
<Listeners>
<Render Handler="this.getStore().sortInfo = undefined;" />
</Listeners>
</ext:PropertyGrid>
</Items>
</ext:Panel>
<ext:Panel runat="server" ID="tabPage2" Title="test2" AutoHeight="true" Layout="FitLayout" Border="true" MonitorResize="true">
<Content>
<!-- USERCONTROL CONTENT. THIS IS EXACTLY WHAT WAS INSIDE THE USERCONTROL CALLED "EventLog" -->
<ext:GridPanel ID="GridPanelEventLog" runat="server" AutoHeight="true" AutoWidth="true" StripeRows="true" Border="true" AutoExpandColumn="EventString" MonitorResize="true">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:DateField runat="server" ID="dateFieldStart"></ext:DateField>
<ext:DateField runat="server" ID="dateFieldEnd"></ext:DateField>
<ext:Button runat="server" ID="btnRefresh"></ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:Store ID="StoreEventLog" runat="server" IDMode="Explicit">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="EventLogId" />
<ext:RecordField Name="Timestamp" Type="Date" />
<ext:RecordField Name="TriggerId" />
<ext:RecordField Name="TriggerName" />
<ext:RecordField Name="EventType" />
<ext:RecordField Name="EventString" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModelContactItems" runat="server">
<Columns>
<ext:Column DataIndex="EventLogId" Header="ID" Width="50" Hidden="true"/>
<ext:DateColumn DataIndex="Timestamp" Header="Tid" Format="yyyy-MM-dd HH:mm" Width="100"/>
<ext:Column DataIndex="TriggerName" Header="Aktör"/>
<ext:Column DataIndex="EventType" Header="Typ"/>
<ext:Column DataIndex="EventString" Header="Info"/>
</Columns>
</ColumnModel>
</ext:GridPanel>
<!-- END USERCONTROL CONTENT -->
</Content>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Window>
</form>
</body>
</html>
The UserControl:
Last edited by geoffrey.mcgill; May 18, 2011 at 5:18 PM.
Reason: [CLOSED]