Feb 01, 2011, 3:41 PM
[CLOSED] ColumnLayout - not setting width before content
I've got two problems below. The column layout doesn't set the width before the content is loaded. So what happens is the accordions in the right column get loaded on the left side and then eventually get moved over to the right side once the AutoLoad in the left column is loaded. This just makes the page jumpy and confusing. I want the position and width to be static for the two columns without any shifting on the page. I also can't get a loading mask to show while all this shifting and loading is going on.
Also, the "homeTabLayoutWrapper" panel needs a height to it or it won't show the columnLayout. This is really annoying because i don't want to set a static height. Sometimes the accordions can run off the page or the message board is too long. AutoHeight doesn't work either.
I had switched from borderLayout to columnLayout to try and fix these height issues, but that didn't' work either.
So basically, i need the columns to load with a set width and i need the wrapper panel to be smarter about height.
Also, the "homeTabLayoutWrapper" panel needs a height to it or it won't show the columnLayout. This is really annoying because i don't want to set a static height. Sometimes the accordions can run off the page or the message board is too long. AutoHeight doesn't work either.
I had switched from borderLayout to columnLayout to try and fix these height issues, but that didn't' work either.
So basically, i need the columns to load with a set width and i need the wrapper panel to be smarter about height.
<ext:Panel ID="homeTabLayoutWrapper" runat="server" Border="false" Layout="fit" >
<Items>
<ext:ColumnLayout ID="clnLayoutHomeTab" runat="server" Split="true" FitHeight="true">
<Columns>
<ext:LayoutColumn ColumnWidth=".55">
<ext:Panel ID="plnHomeTabMessageBoards" AutoHeight="true" runat="server" Width="500" Border="false">
<AutoLoad Url="/Group/HomeTab_MessageBoards" NoCache="true" ShowMask="true" >
<Params>
<ext:Parameter Name="containerId" Value="function () { return #{plnHomeTabMessageBoards}.body.id; }" Mode="Raw" />
</Params>
</AutoLoad>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth=".45">
<ext:Panel ID="Panel3" runat="server" Width="400" AutoHeight="true" Layout="fit" Border="false">
<Items>
<ext:Panel ID="accEventsWrapper" runat="server" AutoHeight="true" Header="false" Border="false">
<Items>
<ext:AccordionLayout ID="accEvents" runat="server" Animate="true">
<Items>
<ext:Panel ID="accEventsPanel" runat="server" Border="false" AutoHeight="true" Layout="fit" Title="Events" Collapsed="false" Padding="10" />
</Items>
</ext:AccordionLayout>
</Items>
</ext:Panel>
<ext:Panel ID="accPhotosWrapper" runat="server" AutoHeight="true" Header="false" Border="false">
<Items>
<ext:AccordionLayout ID="accPhotos" runat="server" Animate="true">
<Items>
<ext:Panel ID="accPhotosPanel" runat="server" Border="false" AutoHeight="true" Layout="fit" Title="Photos" Collapsed="false" Padding="10" />
</Items>
</ext:AccordionLayout>
</Items>
</ext:Panel>
<ext:Panel ID="accRolesWrapper" runat="server" AutoHeight="true" Header="false" Border="false">
<Items>
<ext:AccordionLayout ID="accRoles" runat="server" Animate="true">
<Items>
<ext:Panel ID="accRolesPanel" runat="server" Border="false" AutoHeight="true" Layout="fit" Title="My Roles" Collapsed="true" Padding="10">
<AutoLoad Url="/Group/HomeTab_MyRoles" NoCache="true" ShowMask="true" Scripts="true">
<Params>
<ext:Parameter Name="containerId" Value="function () { return #{accRolesPanel}.body.id; }" Mode="Raw" />
</Params>
</AutoLoad>
</ext:Panel>
</Items>
</ext:AccordionLayout>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</ext:LayoutColumn>
</Columns>
</ext:ColumnLayout>
</Items>
</ext:Panel>
Also the above code is being loaded into a tab. Actually, i'd like the tab panels to be the smartest with the height. The MinHeight does nothing.<ext:Panel ID="GroupPageWrapper" runat="server" Width="900" Border="false">
<Items>
<ext:TabPanel Plain="true" ID="tpGroupTabs" runat="server" ActiveTabIndex="0" Padding="20" TabWidth="200" Border="false" MinHeight="400">
<Items>
<ext:Panel ID="homeTab" runat="server" Title="Home" Layout="fit" AutoHeight="true" MinHeight="400">
<AutoLoad Url="/Group/HomeTab" NoCache="true" ShowMask="true" MaskMsg="Loading home content...">
<Params>
<ext:Parameter Name="containerId" Value="function () { return #{homeTab}.body.id; }" Mode="Raw" />
</Params>
</AutoLoad>
<LoadMask Msg="Loading..." ShowMask="true" />
</ext:Panel>
.....
Last edited by Daniil; Feb 09, 2011 at 2:12 PM.
Reason: [CLOSED]