Render Order

  1. #1

    Render Order

    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>
  2. #2

    RE: Render Order

    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.
    Geoffrey McGill
    Founder & CEO
  3. #3

    RE: Render Order

    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
  4. #4

    RE: Render Order

    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.
    Last edited by geoffrey.mcgill; Feb 22, 2011 at 2:25 AM.
    Geoffrey McGill
    Founder & CEO

Similar Threads

  1. [CLOSED] Order GridPanel Groups in an arbitrary order?
    By dmoore in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 27, 2013, 4:35 AM
  2. Replies: 0
    Last Post: Aug 24, 2011, 12:13 AM
  3. [CLOSED] Toggle Render? Refresh Render?
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 08, 2011, 3:13 PM
  4. GridPanel - Row Order - How To?
    By Tbaseflug in forum 1.x Help
    Replies: 0
    Last Post: May 06, 2009, 4:09 PM
  5. Response order
    By Wtower in forum 1.x Help
    Replies: 0
    Last Post: Apr 21, 2009, 6:37 AM

Posting Permissions