AutoLoad and FitLayout

  1. #1

    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:
    <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,
  2. #2
    SOLVED!

    Apparently simply wrapping the partial view into a FitLayout will do the trick :)

    <ext:FitLayout runat="server">
    <Items>
    <ext:Panel ID="Panel1" runat="server" Layout="FitLayout" Border="true" Cls="app-center">
        <Items>
           ...omitted for clarity...
        </Items>
    </ext:Panel>
    </Items>
    </ext:FitLayout>

Similar Threads

  1. Window Fitlayout
    By canbay in forum 1.x Help
    Replies: 0
    Last Post: Sep 04, 2011, 12:04 PM
  2. [CLOSED] fitlayout
    By Vasudhaika in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 27, 2011, 11:34 AM
  3. FitLayout Issue
    By jskibo in forum 1.x Help
    Replies: 5
    Last Post: Jan 23, 2009, 12:26 AM
  4. Fitlayout & FieldSet
    By Kalitte in forum 1.x Help
    Replies: 2
    Last Post: Dec 30, 2008, 5:17 PM
  5. UpdatePanel and FitLayout
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 06, 2008, 7:42 PM

Tags for this Thread

Posting Permissions