[CLOSED] Two column scrolling layout

  1. #1

    [CLOSED] Two column scrolling layout

    I'm trying to make a two column layout where the two columns 50% width and are auto height. if they're longer than the page, i'd want to scroll to see the rest. Essentially i want it to behave like a newspaper.

    Here's what I'm trying, but i can't get anything to show up unless i set the height on the panels.

    <ext:Panel runat="server" Layout="ColumnLayout" Border="false" AutoDoLayout="true" Padding="15">
        <Items>
            <ext:Panel ID="LeftPanel" runat="server" ColumnWidth="0.5" Split="true" Border="false" Margins="0 10 0 0" Padding="10" Layout="VBoxLayout" Height="800"></ext:Panel>
             <ext:Panel ID="RightPanel" runat="server" ColumnWidth="0.5" Split="true" Border="false" Margins="0 0 0 10" Padding="10" Layout="VBoxLayout" Height="800"></ext:Panel>
        </Items>
    </ext:Panel>
    Last edited by Daniil; Mar 13, 2012 at 5:36 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Please set up
    <LayoutConfig>
        <ext:ColumnLayoutConfig FitHeight="false" />
    </LayoutConfig>
    and AutoHeight="true" for the top Panel.
  3. #3
    I tried what you suggested, but I still don't see anything. See my example...

        <ext:Panel runat="server" Layout="ColumnLayout" Border="false" AutoHeight="true" Padding="15">
            <LayoutConfig>
                <ext:ColumnLayoutConfig FitHeight="false" />
            </LayoutConfig>
            <Items>
                    
                <ext:Panel ID="LeftPanel" runat="server" ColumnWidth="0.5" Split="true" Border="false" Margins="0 10 0 0" Padding="10" Layout="VBoxLayout" AutoHeight="true">
                    <LayoutConfig>
                        <ext:VBoxLayoutConfig Align="Stretch" />
                    </LayoutConfig>
                    <Items>
                        
                        <ext:Panel runat="server" Title="Test 1" Height="200" Html="TEST" Margins="10 0 10 0" />
                        <ext:Panel runat="server" Title="Test 2" Height="200" Html="TEST" Margins="10 0 10 0" />
                        <ext:Panel runat="server" Title="Test 3" Height="200" Html="TEST" Margins="10 0 10 0" />
                        <ext:Panel runat="server" Title="Test 4" Height="200" Html="TEST" Margins="10 0 10 0" />
                        <ext:Panel runat="server" Title="Test 5" Height="200" Html="TEST" Margins="10 0 10 0" />
                        <ext:Panel runat="server" Title="Test 6" Height="200" Html="TEST" Margins="10 0 10 0" />
                        <ext:Panel runat="server" Title="Test 7" Height="200" Html="TEST" Margins="10 0 10 0" />
                        <ext:Panel runat="server" Title="Test 8" Height="200" Html="TEST" Margins="10 0 10 0" />
    
    
                    </Items>
                </ext:Panel>
                    
                <ext:Panel ID="RightPanel" runat="server" ColumnWidth="0.5" Split="true" Border="false" Margins="0 0 0 10" Padding="10" Layout="VBoxLayout" AutoHeight="true">
                    <LayoutConfig>
                        <ext:VBoxLayoutConfig Align="Stretch" />
                    </LayoutConfig>
                    <Items>
    
    
                        <ext:Panel runat="server" Title="Test 1" Height="200" Html="TEST" Margins="10 0 10 0" />
                        <ext:Panel runat="server" Title="Test 2" Height="200" Html="TEST" Margins="10 0 10 0" />
                        <ext:Panel runat="server" Title="Test 3" Height="200" Html="TEST" Margins="10 0 10 0" />
                        <ext:Panel runat="server" Title="Test 4" Height="200" Html="TEST" Margins="10 0 10 0" />
                        <ext:Panel runat="server" Title="Test 5" Height="200" Html="TEST" Margins="10 0 10 0" />
                        <ext:Panel runat="server" Title="Test 6" Height="200" Html="TEST" Margins="10 0 10 0" />
                        <ext:Panel runat="server" Title="Test 7" Height="200" Html="TEST" Margins="10 0 10 0" />
                        <ext:Panel runat="server" Title="Test 8" Height="200" Html="TEST" Margins="10 0 10 0" />
                            
                    </Items>
                </ext:Panel>
    
    
            </Items>
        </ext:Panel>
  4. #4
    In case it helps, this is a little closer to my actual page...

        <ext:Viewport runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel runat="server" Region="North" Html="NORTH" Height="100" />
    
    
                <ext:Panel runat="server" Region="Center" Layout="ColumnLayout" Border="false" AutoHeight="true" Padding="15" AutoScroll="true">
                    <LayoutConfig>
                        <ext:ColumnLayoutConfig FitHeight="false" />
                    </LayoutConfig>
                    <Items>
                    
                        <ext:Panel ID="LeftPanel" runat="server" ColumnWidth="0.5" Split="true" Border="false" Margins="0 10 0 0" Padding="10" Layout="VBoxLayout" AutoHeight="true">
                            <LayoutConfig>
                                <ext:VBoxLayoutConfig Align="Stretch" />
                            </LayoutConfig>
                            <Items>
                        
                                <ext:Panel runat="server" Title="Test 1" Height="200" Html="TEST" Margins="10 0 10 0" />
                                <ext:Panel runat="server" Title="Test 2" Height="200" Html="TEST" Margins="10 0 10 0" />
                                <ext:Panel runat="server" Title="Test 3" Height="200" Html="TEST" Margins="10 0 10 0" />
                                <ext:Panel runat="server" Title="Test 4" Height="200" Html="TEST" Margins="10 0 10 0" />
                                <ext:Panel runat="server" Title="Test 5" Height="200" Html="TEST" Margins="10 0 10 0" />
                                <ext:Panel runat="server" Title="Test 6" Height="200" Html="TEST" Margins="10 0 10 0" />
                                <ext:Panel runat="server" Title="Test 7" Height="200" Html="TEST" Margins="10 0 10 0" />
                                <ext:Panel runat="server" Title="Test 8" Height="200" Html="TEST" Margins="10 0 10 0" />
    
    
                            </Items>
                        </ext:Panel>
                    
                        <ext:Panel ID="RightPanel" runat="server" ColumnWidth="0.5" Split="true" Border="false" Margins="0 0 0 10" Padding="10" Layout="VBoxLayout" AutoHeight="true">
                            <LayoutConfig>
                                <ext:VBoxLayoutConfig Align="Stretch" />
                            </LayoutConfig>
                            <Items>
    
    
                                <ext:Panel runat="server" Title="Test 1" Height="200" Html="TEST" Margins="10 0 10 0" />
                                <ext:Panel runat="server" Title="Test 2" Height="200" Html="TEST" Margins="10 0 10 0" />
                                <ext:Panel runat="server" Title="Test 3" Height="200" Html="TEST" Margins="10 0 10 0" />
                                <ext:Panel runat="server" Title="Test 4" Height="200" Html="TEST" Margins="10 0 10 0" />
                                <ext:Panel runat="server" Title="Test 5" Height="200" Html="TEST" Margins="10 0 10 0" />
                                <ext:Panel runat="server" Title="Test 6" Height="200" Html="TEST" Margins="10 0 10 0" />
                                <ext:Panel runat="server" Title="Test 7" Height="200" Html="TEST" Margins="10 0 10 0" />
                                <ext:Panel runat="server" Title="Test 8" Height="200" Html="TEST" Margins="10 0 10 0" />
                            
                            </Items>
                        </ext:Panel>
    
    
                    </Items>
                </ext:Panel>
    
    
                <ext:Panel runat="server" Region="South" Height="100" Html="SOUTH" />
            </Items>
        </ext:Viewport>
  5. #5
    VBox doesn't support auto-heighting.

    I can suggest to use RowLayout.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
    
        <style type="text/css">
            .my-margins {
                margin-bottom: 10px;    
            }
        </style>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Viewport runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel 
                    runat="server" 
                    Region="North" 
                    Html="NORTH" 
                    Height="100" />
                <ext:Panel 
                    runat="server" 
                    Region="Center" 
                    Layout="ColumnLayout" 
                    Border="false" 
                    Padding="15"
                    AutoScroll="true">
                    <LayoutConfig>
                        <ext:ColumnLayoutConfig FitHeight="false" />
                    </LayoutConfig>
                    <Items>
                        <ext:Panel 
                            runat="server" 
                            ColumnWidth="0.5" 
                            Border="false"
                            Padding="10" 
                            Layout="RowLayout" 
                            AutoScroll="true">
                            <Defaults>
                                <ext:Parameter Name="cls" Value="my-margins" Mode="Value" />
                            </Defaults>
                            <Items>
                                <ext:Panel runat="server" Title="Test 1" Height="200" Html="TEST" />
                                <ext:Panel runat="server" Title="Test 2" Height="200" Html="TEST" />
                                <ext:Panel runat="server" Title="Test 3" Height="200" Html="TEST" />
                                <ext:Panel runat="server" Title="Test 4" Height="200" Html="TEST" />
                                <ext:Panel runat="server" Title="Test 5" Height="200" Html="TEST" />
                                <ext:Panel runat="server" Title="Test 6" Height="200" Html="TEST" />
                                <ext:Panel runat="server" Title="Test 7" Height="200" Html="TEST" />
                            </Items>
                        </ext:Panel>
                        <ext:Panel 
                            runat="server" 
                            ColumnWidth="0.5" 
                            Border="false"
                            Padding="10" 
                            Layout="RowLayout" 
                            AutoScroll="true">
                            <Defaults>
                                <ext:Parameter Name="cls" Value="my-margins" Mode="Value" />
                            </Defaults>
                            <Items>
                                <ext:Panel runat="server" Title="Test 1" Height="200" Html="TEST" />
                                <ext:Panel runat="server" Title="Test 2" Height="200" Html="TEST" />
                                <ext:Panel runat="server" Title="Test 3" Height="200" Html="TEST" />
                                <ext:Panel runat="server" Title="Test 4" Height="200" Html="TEST" />
                                <ext:Panel runat="server" Title="Test 5" Height="200" Html="TEST" />
                                <ext:Panel runat="server" Title="Test 6" Height="200" Html="TEST" />
                                <ext:Panel runat="server" Title="Test 7" Height="200" Html="TEST" />
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:Panel>
                <ext:Panel 
                    runat="server" 
                    Region="South" 
                    Height="100" 
                    Html="SOUTH" />
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
  6. #6
    Thanks, this worked great!

Similar Threads

  1. [CLOSED] layout issue when using RowLayout within column layout
    By Daly_AF in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 11, 2012, 2:40 PM
  2. [CLOSED] column layout IE6 bug
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jan 18, 2012, 12:25 AM
  3. Replies: 1
    Last Post: Jul 27, 2011, 10:19 AM
  4. Replies: 2
    Last Post: Jul 06, 2011, 10:51 PM
  5. [CLOSED] vbox layout inside column layout
    By craig2005 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 04, 2011, 2:44 PM

Posting Permissions