Render Order

[Ben]

I have a panel which has a column layout inside followed by a tab panel.

This renders as expected in the design view in VWD 2008 with the column layout followed by the tab panel. When viewed in a browser though the tab panel is rendered above the column layout.

Is this correct?

Ben

<ext:Panel ID="Panel1" runat="server" Height="300" BodyStyle="padding: 10px;">
    <Content>
        <ext:ColumnLayout ID="ColumnLayout1" runat="server">
            <ext:LayoutColumn ColumnWidth="0.2">
                <ext:FieldSet runat="server" ID="Panel4" Border="false">
                    <Content>
                        <ext:TextField ID="TextField2" runat="server" />
                    </Content>
                </ext:FieldSet>
            </ext:LayoutColumn>
            <ext:LayoutColumn ColumnWidth="0.3">
                <ext:Panel runat="server" ID="Panel3" Border="false">
                    <Content>
                        <ext:TextField ID="TextField1" runat="server" />
                    </Content>
                </ext:Panel>
            </ext:LayoutColumn>
            <ext:LayoutColumn ColumnWidth="0.5">
                <ext:Panel runat="server" ID="Panel2" Border="false">
                    <Content>
                        <ext:TextField ID="TextField3" runat="server" />
                    </Content>
                </ext:Panel>
            </ext:LayoutColumn>
        </ext:ColumnLayout>
        
        <ext:TabPanel ID="TabPanel1" runat="server" ActiveTab="2" Height="300" Title="TabPanel">
            <Tabs>
                <ext:Tab runat="server" Title="Tab 1" ID="ctl165">
                    <Content>
                    </Content>
                </ext:Tab>
                <ext:Tab runat="server" Title="Tab 2" ID="ctl166">
                    <Content>
                    </Content>
                </ext:Tab>
                <ext:Tab runat="server" Title="Tab 3" ID="ctl167">
                    <Content>
                        <ext:HtmlEditor ID="HtmlEditor1" runat="server" AutoWidth="true" AutoHeight="true" />
                    </Content>
                </ext:Tab>
            </Tabs>
        </ext:TabPanel>
    </Content>
</ext:Panel>

[geoffrey.mcgill]

Hi Ben,

I'm surprised that actually renders in the browser. An Exception should have been thrown, because if a Layout Control is nested in a Container/Panel, no other Controls can be "at the same level".

You might have to first use an AnchorLayout, then nest another Panel for the top and stick the TabPanel in the bottom. The top anchor would then contain your original ColumnLayout.

I can't mockup this up right at the moment, but I will later today.

Or, a combination of nested BorderLayout controls would do the trick as well.

[Ben]

Ok, it's probably easier to explain what I was trying to achieve which is basically form 5 (the last one) in this Ext demo. Now from my untrained eye it looks to me like there is a two column structure (hence my use of ColumnLayout) followed by a tab panel.

The Ext demo does however add these elements to a FormPanel, but this can be change to a Panel without issue.

Ben

[geoffrey.mcgill]

Hi Ben,

I took another look at the sample and actually the base Layout control (inside the main Panel) is a ContainerLayout.

You can think of a ContainerLayout like a "stack". Basically, a subsequent item just gets rendered below the previous.

So the main Panel is ContainerLayout, then a Panel and a TabPanel. Inside the inner Panel is a ColumnLayout, then two Columns. I made a sample.

Obviously the FormLayout/FormPanel have not been implemented in the Toolkit yet, but they're coming.

Hope this helps.