[CLOSED] vbox layout inside column layout

[craig2005]

I thought i had the hang of the layouts, but i guess not yet. Why does this not work? For some reason, only the top of the top bar of the calendar shows.

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<ext:ColumnLayout ID="columnLayoutCalendar" runat="server" Split="true" FitHeight="true">
    <Columns>
    <ext:LayoutColumn>
        <ext:Panel ID="plnDatePicker" runat="server" Width="175">
            <Items>
                <ext:DatePicker 
                    ID="DatePicker1" 
                    runat="server" 
                    Cls="ext-cal-nav-picker">
            </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>
    </ext:LayoutColumn>
    <ext:LayoutColumn ColumnWidth="1.0">
          <ext:Panel runat="server" ID="plnCalendarComponentWrapper" Border="false" Layout="vbox">
            <LayoutConfig>
                <ext:VBoxLayoutConfig Align="Stretch" />
            </LayoutConfig>
            <Items>
            <ext:CalendarPanel
                    ID="plnCalendar" 
                    runat="server"
                    ActiveIndex="2"
                    Border="false"
                    Height="500">
                    <EventStore ID="storeCalendarEvents" runat="server" DateFormat="yyyy-MM-ddThh:mm:ss">
                        <Proxy>
                            <ext:HttpProxy Url="/Event/GetEventsByDate" />
                        </Proxy>
                    </EventStore>
                </ext:CalendarPanel>
                 <ext:Panel ID="plnCalendarEditEvent" runat="server" Hidden="true" Border="false">
                    <Content>
                        Hello world
                    </Content>
                </ext:Panel>
            </Items>
          </ext:Panel>
        </ext:LayoutColumn>
    </Columns>                    
</ext:ColumnLayout>

If i just put the calendar in the LayoutColumn then the calendar shows fine. But i want to add additional panels that are vertical of each other. So basically, i want to add hidden panels below the calendar, so i can hide the calendar and show the hidden panels.

[Daniil]

Hi,

I have added closed tag for DatePicker because it's absent in the code you posted.

Lets remember about the following Vladimit's words:

Also, what if everything isn't wrapped in one control?

In this case, interim panel will be created and view will be added to panel's content area, you can force Items using instead content if wrap view by layout control (please note that wrapping by layout control is possible for components only, for example, store cannot be added to Items)

So, when there is a layout control on top level interim panel will be created. This panel has no height and must get it from its container. Setting Layout="fit" for its container should solve the problem.

Example

<ext:Panel 
    ID="Panel1" 
    runat="server" 
    Title="Home" 
    Height="500" 
    Layout="fit">
    <AutoLoad 
        Url="/Home/HomeColumns" 
        NoCache="true" 
        ShowMask="true">
        <Params>
            <ext:Parameter 
                Name="containerId" 
                Value="function () { 
                    return #{Panel1}.id; 
                }" 
                Mode="Raw" />
        </Params>
    </AutoLoad>
</ext:Panel>

[craig2005]

ok, that fixed it. I wasn't using the RenderMode of AddTo for the ASCX file. Before the previous thread, i could never get that to work but that was because i was passing in the body id and not the component id.

So basically all my height issues are attributed to the RenderMode that is being used.

Thanks again!