What's New?

BorderLayout

  1. #1
    Nov 25, 2008, 7:14 AM

    BorderLayout

    I'm trying to achieve a split layout for part of a page. Essentially there are two columns with the second column being wider than the first. The second column should be split into three equal size rows.

    What I've done so far is use a BorderLayout to create two resizeable columns. I've then put a panel inside the second column containing another border layout that splits into three row. How can I set the height of these areas evenly?

    <ext:Panel runat="server" ID="test333" Border="false" AutoWidth="true" Height="500">
    <Body>
        <ext:BorderLayout ID="BorderLayout1" runat="server">
            <West MinWidth="100" MaxWidth="350" Split="true">
                <ext:Panel 
                    ID="WestPanel" 
                    runat="server" Width="185">
                    <Body>
                    <p>Area1</p>

                    </Body>
                </ext:Panel>
            </West>
            <Center>
                <ext:Panel runat="server" ID="test" Border="false">
                <Body>
                    <ext:BorderLayout runat="server" ID="BorderLayout2">
                        <North MinHeight="50" Split="true" Collapsible="false">
                            <ext:Panel 
                                ID="Panel1" 
                                runat="server" Height="50">
                                <Body>
                                <p>Area2</p>

                                </Body>
                            </ext:Panel>
                        </North>
                        <Center MinHeight="50" Collapsible="false">
                            <ext:Panel 
                                ID="Panel2" 
                                runat="server" Height="50">
                                <Body>
                                <p>Area3</p>

                                </Body>
                            </ext:Panel>
                        </Center>
                        <South MinHeight="50" Split="true" Collapsible="false">
                            <ext:Panel 
                                ID="Panel3" 
                                runat="server" Height="50">
                                <Body>
                                <p>Area4</p>

                                </Body>
                            </ext:Panel>
                        </South>
                    </ext:BorderLayout>
                </Body></ext:Panel>
            </Center>
        </ext:BorderLayout>
    </Body>
</ext:Panel>
  2. #2
    Nov 25, 2008, 8:39 AM

    RE: BorderLayout

    Hi SoftFooding,

    At the moment, there is not an ultra clean way to accomplish three equal rows, but give the following a try.

    Example

    <script type="text/javascript">
    var adjust = function(panel) {
        var diff = (panel.getSize().height / 3) - 10,
            layout = panel.getLayout();
        layout.north.panel.setHeight(diff);
        layout.center.panel.setHeight(diff);
        layout.south.panel.setHeight(diff);
        panel.syncSize();
    }
</script>

<ext:Panel runat="server" ID="test333" Border="false" AutoWidth="true" Height="500">
    <Listeners>
        <Resize Handler="adjust(el.getLayout().center.panel);" Delay="10" />
    </Listeners>
    <Body>
        <ext:BorderLayout ID="BorderLayout1" runat="server">
            <West MinWidth="100" MaxWidth="350" Split="true">
                <ext:Panel ID="WestPanel" runat="server" Width="185">
                    <Body>
                        <p>Area1</p>
                    </Body>
                </ext:Panel>
            </West>
            <Center>
                <ext:Panel runat="server" ID="Panel1" Border="false">
                    <Body>
                        <ext:BorderLayout runat="server" ID="BorderLayout2">
                            <North MinHeight="50" Split="true" Collapsible="false">
                                <ext:Panel ID="Panel2" runat="server" Html="North" />
                            </North>
                            <Center MinHeight="50" Collapsible="false">
                                <ext:Panel ID="Panel3" runat="server" Html="Center" />
                            </Center>
                            <South MinHeight="50" Split="true" Collapsible="false">
                                <ext:Panel ID="Panel4" runat="server" Html="South" />
                            </South>
                        </ext:BorderLayout>
                    </Body>
                </ext:Panel>
            </Center>
        </ext:BorderLayout>
    </Body>
</ext:Panel>
    There's also the <ext:RowLayout> control, see https://examples1.ext.net/#/Layout/RowLayout/Basic/. But... we're making some changes to the <ext:RowLayout> and the syntax will change slightly. We're also hoping to implement a Split="true" property on the <ext:RowLayout>.

    Hope this helps.

    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Nov 26, 2008, 3:55 PM

    RE: BorderLayout

    Hi Geoffrey,

    Thanks that seems to have worked. It does however effectively fix the height of the split areas (if you try to move the splitter, the height gets re-set to 1/3 of the total height) . I have changed the listener to Render, so it looks even at page load but allows the use to play about with it. Is it possible to also do the same thing on window resize through the listeners or do I need to hook something in manually?

    Thanks,
    Ben

Similar Threads

  1. BorderLayout inside BorderLayout that is in MasterPage
    By drorl in forum 2.x Help
    Replies: 0
    Last Post: Apr 19, 2012, 3:52 PM
  2. How to use Coolite BorderLayout by C#
    By billionsuper in forum 1.x Help
    Replies: 1
    Last Post: May 25, 2011, 9:18 AM
  3. Nested BorderLayout inside a TablePanel inside a BorderLayout
    By cdmdotnet in forum 1.x Help
    Replies: 1
    Last Post: Jun 08, 2010, 12:51 AM
  4. More than one BorderLayout
    By mj.daly in forum 1.x Help
    Replies: 4
    Last Post: Jan 29, 2010, 11:27 AM
  5. BorderLayout on BorderLayout do not render
    By nanosassa in forum 1.x Help
    Replies: 1
    Last Post: Apr 22, 2009, 4:05 PM

Posting Permissions