Aug 18, 2011, 3:00 PM
AutoLoad and FitLayout
HI All,
Sorry if this has already been asked but I am having some issues with my panels respecting the layout of the container.
If I do something like this in the INdex:
If I move everything to the Main page, like this:
Regards,
Sorry if this has already been asked but I am having some issues with my panels respecting the layout of the container.
If I do something like this in the INdex:
<ext:Viewport ID="Viewport1" runat="server" Layout="Border">
<Items>
<ext:Panel ID="Panel1" runat="server" Height="50" Border="false" Region="North">
<Content>
<h1>Header</h1>
</Content>
</ext:Panel>
<ext:Panel ID="CalendarPanel" runat="server" Region="Center" Layout="FitLayout" Border="true" Cls="app-center">
<AutoLoad Url="/Calendar/" ShowMask="true">
<Params>
<ext:Parameter Name="containerId" Value="function () { return this.id; }" Mode="Raw"></ext:Parameter>
</Params>
</AutoLoad>
</ext:Panel>
</Items>
</ext:Viewport>
With the partial view being:<ext:Panel ID="Panel1" runat="server" Layout="FitLayout" Border="true" Cls="app-center">
<Items>
<ext:Panel ID="Panel3"
runat="server"
Border="true">
<Items>
</Items>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button
ID="Button1"
runat="server"
Text="Save All Events"
Icon="Disk" />
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</Items>
</ext:Panel>
The partial view is squeezed when rendered, as you can see by the Borders of the panel, the Viewport occupies the entire page, the Panel1 occupies only the entire width but hte height is just enough to fit the Panel3, which in turn is only wide enough to hold the button.If I move everything to the Main page, like this:
<ext:Viewport ID="Viewport1" runat="server" Layout="Border">
<Items>
<ext:Panel ID="Panel1" runat="server" Height="50" Border="false" Region="North">
<Content>
<h1>Header</h1>
</Content>
</ext:Panel>
<ext:Panel ID="CalendarPanel" runat="server" Region="Center" Layout="FitLayout" Border="true" Cls="app-center">
<ext:Panel ID="Panel1" runat="server" Layout="FitLayout" Border="true" Cls="app-center">
<Items>
<ext:Panel ID="Panel3"
runat="server"
Border="true">
<Items>
</Items>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button
ID="Button1"
runat="server"
Text="Save All Events"
Icon="Disk" />
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</Items>
</ext:Panel>
</ext:Panel>
</Items>
</ext:Viewport>
Then all the three Panels (Viewport, Panel1 and Panel3) will be the same size, occupying the entire viewport... Is there a way to replicate this behaviour also when loading the panel with AutoLoad? I have tried to add a callback to the AutoLoad to redo the layout of the viewport, but it says that the viewport is null (probably out of scope?).Regards,