[CLOSED] Nested GridPanel not scrolling

  1. #1

    [CLOSED] Nested GridPanel not scrolling

    I have a GridPanel that is nested within a container but I cannot get it to scroll when the outer panels are not large enough to show all the data.

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e) {
    
            this.Store1.DataSource = new List<Company> 
             { 
                 new Company("3m Co", 71.72, 0.02, 0.03),
                 new Company("Alcoa Inc", 29.01, 0.42, 1.47),
                 new Company("Altria Group Inc", 83.81, 0.28, 0.34),
                 new Company("American Express Company", 52.55, 0.01, 0.02),
                 new Company("American International Group, Inc.", 64.13, 0.31, 0.49),
                 new Company("AT&T Inc.", 31.61, -0.48, -1.54),
                 new Company("Boeing Co.", 75.43, 0.53, 0.71),
                 new Company("Caterpillar Inc.", 67.27, 0.92, 1.39),
                 new Company("Citigroup, Inc.", 49.37, 0.02, 0.04),
                 new Company("E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28),
                 new Company("Exxon Mobil Corp", 68.1, -0.43, -0.64),
                 new Company("General Electric Company", 34.14, -0.08, -0.23),
                 new Company("General Motors Corporation", 30.27, 1.09, 3.74),
                 new Company("Hewlett-Packard Co.", 36.53, -0.03, -0.08),
                 new Company("Honeywell Intl Inc", 38.77, 0.05, 0.13),
                 new Company("Intel Corporation", 19.88, 0.31, 1.58),
                 new Company("International Business Machines", 81.41, 0.44, 0.54),
                 new Company("Johnson & Johnson", 64.72, 0.06, 0.09),
                 new Company("JP Morgan & Chase & Co", 45.73, 0.07, 0.15),
                 new Company("McDonald\"s Corporation", 36.76, 0.86, 2.40),
                 new Company("Merck & Co., Inc.", 40.96, 0.41, 1.01),
                 new Company("Microsoft Corporation", 25.84, 0.14, 0.54),
                 new Company("Pfizer Inc", 27.96, 0.4, 1.45),
                 new Company("The Coca-Cola Company", 45.07, 0.26, 0.58),
                 new Company("The Home Depot, Inc.", 34.64, 0.35, 1.02),
                 new Company("The Procter & Gamble Company", 61.91, 0.01, 0.02),
                 new Company("United Technologies Corporation", 63.26, 0.55, 0.88),
                 new Company("Verizon Communications", 35.57, 0.39, 1.11),
                 new Company("Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63)
             };
    
            this.Store1.DataBind();
        }
    
        public class Company {
            public Company(string name, double price, double change, double pctChange) {
                this.Name = name;
                this.Price = price;
                this.Change = change;
                this.PctChange = pctChange;
            }
    
            public string Name { get; set; }
            public double Price { get; set; }
            public double Change { get; set; }
            public double PctChange { get; set; }
        }
    </script>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <link type='text/css' href='http://fonts.googleapis.com/css?family=Archivo+Black' rel='stylesheet'>
    
        <style>
            html {
                margin: 0;
                padding: 0;
                width: 100%;
                background: #2f98cd;
            }
            body {
                margin: 0;
                padding: 0;
                width: 100%;
                background: #ffffff;
                font-family: Verdana, Geneva, sans-serif;
                font-size: 14px;
            }
            .MainContent {
                padding: 0 5px;
                background: #ffffff;
                margin: 0 auto 0;
            }
            .TestNavigationHeader {
                padding: 0;
                margin: 0;
                background: #2f98cd;
                color: #ffffff;
                height: 35px;
            }
        </style>
    </head>
    <body id="MainBody" runat="server">
        <form id="frmMain" runat="server">
            <div id="mainContent">
                <ext:ResourceManager ID="extResourceManager" runat="server" />
                <ext:Viewport ID="viewMainS" runat="server" MinHeight="400"
                    MinWidth="250" Layout="FitLayout">
                    <Content>
                        <ext:Container ID="pnlPageContent" runat="server" Border="false"
                            IDMode="Static" AutoDoLayout="true" Layout="VBoxLayout">
                            <LayoutConfig>
                                <ext:VBoxLayoutConfig Pack="Start" Align="Stretch" ManageOverflow="2" ReserveScrollbar="true" />
                            </LayoutConfig>
                            <Content>
                                <ext:Container runat="server" ID="pnlNavigation" Border="false" Cls="noPrint TestNavigationHeader"
                                    ClientIDMode="Static" AutoDoLayout="true">
                                    <Content>
                                        <ext:Toolbar ID="tbarNavigationToolbar" runat="server" AutoWidth="true" Flat="true"
                                            EnableOverflow="true" ClientIDMode="Static" Cls="TestHeaderMenu" MinWidth="280">
                                            <Items>
                                                <ext:Hidden runat="server" ID="hidVisablePopups" Text="||" />
                                                <ext:Component runat="server" ClientIDMode="Static" ID="InternalHeaderLogo">
                                                    <Content>
                                                        <a class="FPLogo" href="#">
                                                            <asp:Image ID="imgTestPortalLogo" runat="server" ImageUrl="http://lorempixel.com/36/35/abstract/" AlternateText="Test Portal Logo" ClientIDMode="Static" /><div class="LogoWords"><span>Test</span> PORTAL</div>
                                                        </a>
                                                    </Content>
                                                </ext:Component>
                                                <ext:ToolbarFill ID="ToolbarFill1" runat="server" ClientIDMode="Static" />
                                                <ext:Button ID="Button3" runat="server" Text="menu controls" Icon="NoteEdit">
                                                </ext:Button>
                                                <ext:Button ID="Button4" runat="server" Text="menu controls" Icon="NoteEdit">
                                                </ext:Button>
                                            </Items>
                                        </ext:Toolbar>
                                    </Content>
                                </ext:Container>
                                <ext:Container runat="server" ID="pnlMainContent"
                                    StyleSpec="border: 1px blue solid !important;"
                                    ClientIDMode="Static" AutoDoLayout="true" Cls="MainContent" AutoScroll="false">
                                    <Content>
                                        <h1>
                                            <asp:Label ID="lblPageTitle" runat="server" Text="Page Title" ClientIDMode="Static"></asp:Label></h1>
                                        <p>This example of instructional text.</p>
                                        <ext:Toolbar ID="OptionalToolbar1" runat="server">
                                            <Items>
                                                <ext:Button ID="Button1" runat="server" Text="Multiple data controls" Icon="NoteEdit">
                                                </ext:Button>
                                                <ext:ComboBox ID="ComboBox1" runat="server">
                                                </ext:ComboBox>
                                            </Items>
                                        </ext:Toolbar>
    
                                        <ext:Store ID="Store1" runat="server">
                                            <Model>
                                                <ext:Model ID="Model1" runat="server">
                                                    <Fields>
                                                        <ext:ModelField Name="Name" />
                                                        <ext:ModelField Name="Price" />
                                                        <ext:ModelField Name="Change" />
                                                        <ext:ModelField Name="PctChange" />
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
    
                                        <p>This example of optional text. If the toolbar is present this will usually not be included.</p>
                                    </Content>
                                </ext:Container>
    
                                <ext:Container runat="server" ID="pnlExpandedMainContent"
                                    StyleSpec="border: 1px Green solid !important;" Flex="3"
                                    ClientIDMode="Static" AnchorHorizontal="100%" AnchorVertical="100%" AutoScroll="false">
                                    <Content>
                                        <ext:GridPanel
                                            ID="GridPanel1"
                                            runat="server"
                                            StoreID="Store1" AutoScroll="true"
                                            StyleSpec="border: 1px cyan solid !important;">
                                            <ColumnModel ID="ColumnModel1" runat="server">
                                                <Columns>
                                                    <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="Name" Flex="1" />
                                                    <ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="Price">
                                                    </ext:Column>
                                                    <ext:Column ID="Column3" runat="server" Text="Change" Width="75" DataIndex="Change">
                                                    </ext:Column>
                                                    <ext:Column ID="Column4" runat="server" Text="Change" Width="75" DataIndex="PctChange">
                                                    </ext:Column>
                                                </Columns>
                                            </ColumnModel>
                                        </ext:GridPanel>
                                    </Content>
                                </ext:Container>
                                <ext:Container ID="pnlTestFooter" runat="server" Cls="noPrint"
                                    ClientIDMode="Static" AutoDoLayout="true" StyleSpec="background-color:gold;">
                                    <Content>
                                        <div id="Footer">
                                            <a href="#">Option1</a> | <a href="#">Option2</a> | <a href="#">E-mail</a>
                                        </div>
                                    </Content>
                                </ext:Container>
                            </Content>
                        </ext:Container>
                    </Content>
                </ext:Viewport>
            </div>
        </form>
    </body>
    </html>
    The pages are divided into the three main regions (the header navigation, the Main body, and the footer).
    The main body should be fill the portion of the screen not used be the header and footer.
    The body may contain a grid/panel or multiple grids/panels that will have more rows (and possibly columns) that can be rendered on screen.

    I am sure that I simply have not tried the right combination of layouts and panels but figured asking on the forums now that I am a pro member would be the most effective use of my time.

    Using Ext.net 2.2.0.40838.
    Last edited by Daniil; Jul 19, 2013 at 4:47 PM. Reason: [CLOSED]
  2. #2
    Hello!

    You should use Items for Ext.NET controls and Layout="Fit":

    <%@ Page Language="C#" %>
     
    <%@ Import Namespace="System.Collections.Generic" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <!DOCTYPE html>
     
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e) {
     
            this.Store1.DataSource = new List<Company> 
             { 
                 new Company("3m Co", 71.72, 0.02, 0.03),
                 new Company("Alcoa Inc", 29.01, 0.42, 1.47),
                 new Company("Altria Group Inc", 83.81, 0.28, 0.34),
                 new Company("American Express Company", 52.55, 0.01, 0.02),
                 new Company("American International Group, Inc.", 64.13, 0.31, 0.49),
                 new Company("AT&T Inc.", 31.61, -0.48, -1.54),
                 new Company("Boeing Co.", 75.43, 0.53, 0.71),
                 new Company("Caterpillar Inc.", 67.27, 0.92, 1.39),
                 new Company("Citigroup, Inc.", 49.37, 0.02, 0.04),
                 new Company("E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28),
                 new Company("Exxon Mobil Corp", 68.1, -0.43, -0.64),
                 new Company("General Electric Company", 34.14, -0.08, -0.23),
                 new Company("General Motors Corporation", 30.27, 1.09, 3.74),
                 new Company("Hewlett-Packard Co.", 36.53, -0.03, -0.08),
                 new Company("Honeywell Intl Inc", 38.77, 0.05, 0.13),
                 new Company("Intel Corporation", 19.88, 0.31, 1.58),
                 new Company("International Business Machines", 81.41, 0.44, 0.54),
                 new Company("Johnson & Johnson", 64.72, 0.06, 0.09),
                 new Company("JP Morgan & Chase & Co", 45.73, 0.07, 0.15),
                 new Company("McDonald\"s Corporation", 36.76, 0.86, 2.40),
                 new Company("Merck & Co., Inc.", 40.96, 0.41, 1.01),
                 new Company("Microsoft Corporation", 25.84, 0.14, 0.54),
                 new Company("Pfizer Inc", 27.96, 0.4, 1.45),
                 new Company("The Coca-Cola Company", 45.07, 0.26, 0.58),
                 new Company("The Home Depot, Inc.", 34.64, 0.35, 1.02),
                 new Company("The Procter & Gamble Company", 61.91, 0.01, 0.02),
                 new Company("United Technologies Corporation", 63.26, 0.55, 0.88),
                 new Company("Verizon Communications", 35.57, 0.39, 1.11),
                 new Company("Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63)
             };
     
            this.Store1.DataBind();
        }
     
        public class Company {
            public Company(string name, double price, double change, double pctChange) {
                this.Name = name;
                this.Price = price;
                this.Change = change;
                this.PctChange = pctChange;
            }
     
            public string Name { get; set; }
            public double Price { get; set; }
            public double Change { get; set; }
            public double PctChange { get; set; }
        }
    </script>
     
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <link type='text/css' href='http://fonts.googleapis.com/css?family=Archivo+Black' rel='stylesheet'>
     
        <style>
            html {
                margin: 0;
                padding: 0;
                width: 100%;
                background: #2f98cd;
            }
            body {
                margin: 0;
                padding: 0;
                width: 100%;
                background: #ffffff;
                font-family: Verdana, Geneva, sans-serif;
                font-size: 14px;
            }
            .MainContent {
                padding: 0 5px;
                background: #ffffff;
                margin: 0 auto 0;
            }
            .TestNavigationHeader {
                padding: 0;
                margin: 0;
                background: #2f98cd;
                color: #ffffff;
                height: 35px;
            }
        </style>
    </head>
    <body id="MainBody" runat="server">
        <form id="frmMain" runat="server">
            <div id="mainContent">
                <ext:ResourceManager ID="extResourceManager" runat="server" />
                <ext:Viewport ID="viewMainS" runat="server" MinHeight="400"
                    MinWidth="250" Layout="FitLayout">
                    <Content>
                        <ext:Container ID="pnlPageContent" runat="server" Border="false"
                            IDMode="Static" AutoDoLayout="true" Layout="VBoxLayout">
                            <LayoutConfig>
                                <ext:VBoxLayoutConfig Pack="Start" Align="Stretch" ManageOverflow="2" ReserveScrollbar="true" />
                            </LayoutConfig>
                            <Content>
                                <ext:Container runat="server" ID="pnlNavigation" Border="false" Cls="noPrint TestNavigationHeader"
                                    ClientIDMode="Static" AutoDoLayout="true">
                                    <Content>
                                        <ext:Toolbar ID="tbarNavigationToolbar" runat="server" AutoWidth="true" Flat="true"
                                            EnableOverflow="true" ClientIDMode="Static" Cls="TestHeaderMenu" MinWidth="280">
                                            <Items>
                                                <ext:Hidden runat="server" ID="hidVisablePopups" Text="||" />
                                                <ext:Component runat="server" ClientIDMode="Static" ID="InternalHeaderLogo">
                                                    <Content>
                                                        <a class="FPLogo" href="#">
                                                            <asp:Image ID="imgTestPortalLogo" runat="server" ImageUrl="http://lorempixel.com/36/35/abstract/" AlternateText="Test Portal Logo" ClientIDMode="Static" /><div class="LogoWords"><span>Test</span> PORTAL</div>
                                                        </a>
                                                    </Content>
                                                </ext:Component>
                                                <ext:ToolbarFill ID="ToolbarFill1" runat="server" ClientIDMode="Static" />
                                                <ext:Button ID="Button3" runat="server" Text="menu controls" Icon="NoteEdit">
                                                </ext:Button>
                                                <ext:Button ID="Button4" runat="server" Text="menu controls" Icon="NoteEdit">
                                                </ext:Button>
                                            </Items>
                                        </ext:Toolbar>
                                    </Content>
                                </ext:Container>
                                <ext:Container runat="server" ID="pnlMainContent"
                                    StyleSpec="border: 1px blue solid !important;"
                                    ClientIDMode="Static" AutoDoLayout="true" Cls="MainContent" AutoScroll="false">
                                    <Content>
                                        <h1>
                                            <asp:Label ID="lblPageTitle" runat="server" Text="Page Title" ClientIDMode="Static"></asp:Label></h1>
                                        <p>This example of instructional text.</p>
                                        <ext:Toolbar ID="OptionalToolbar1" runat="server">
                                            <Items>
                                                <ext:Button ID="Button1" runat="server" Text="Multiple data controls" Icon="NoteEdit">
                                                </ext:Button>
                                                <ext:ComboBox ID="ComboBox1" runat="server">
                                                </ext:ComboBox>
                                            </Items>
                                        </ext:Toolbar>
                                        <p>This example of optional text. If the toolbar is present this will usually not be included.</p>
                                    </Content>
                                </ext:Container>
     
                                <ext:Container runat="server" ID="pnlExpandedMainContent"
                                    StyleSpec="border: 1px Green solid !important;" Flex="3" Layout="Fit"
                                    ClientIDMode="Static" AutoScroll="false">
                                    <Bin>
                                        <ext:Store ID="Store1" runat="server">
                                            <Model>
                                                <ext:Model ID="Model1" runat="server">
                                                    <Fields>
                                                        <ext:ModelField Name="Name" />
                                                        <ext:ModelField Name="Price" />
                                                        <ext:ModelField Name="Change" />
                                                        <ext:ModelField Name="PctChange" />
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Bin>
                                    <Items>
                                        <ext:GridPanel
                                            ID="GridPanel1"
                                            runat="server"
                                            StoreID="Store1" AutoScroll="true"
                                            StyleSpec="border: 1px cyan solid !important;">
                                            <ColumnModel ID="ColumnModel1" runat="server">
                                                <Columns>
                                                    <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="Name" Flex="1" />
                                                    <ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="Price">
                                                    </ext:Column>
                                                    <ext:Column ID="Column3" runat="server" Text="Change" Width="75" DataIndex="Change">
                                                    </ext:Column>
                                                    <ext:Column ID="Column4" runat="server" Text="Change" Width="75" DataIndex="PctChange">
                                                    </ext:Column>
                                                </Columns>
                                            </ColumnModel>
                                        </ext:GridPanel>
                                    </Items>
                                </ext:Container>
                                <ext:Container ID="pnlTestFooter" runat="server" Cls="noPrint"
                                    ClientIDMode="Static" AutoDoLayout="true" StyleSpec="background-color:gold;">
                                    <Content>
                                        <div id="Footer">
                                            <a href="#">Option1</a> | <a href="#">Option2</a> | <a href="#">E-mail</a>
                                        </div>
                                    </Content>
                                </ext:Container>
                            </Content>
                        </ext:Container>
                    </Content>
                </ext:Viewport>
            </div>
        </form>
    </body>
    </html>
  3. #3
    That worked like a charm! Thank-you.
    Out of curiosity where can I find documentation on constructs like the
    <Bin> </Bin>
    tags that you used?

    Regards,
    TNW

    Quote Originally Posted by Baidaly View Post
    Hello!

    You should use Items for Ext.NET controls and Layout="Fit":
  4. #4
  5. #5
    Ok. That helps.

    BTW you can flag this as closed.

Similar Threads

  1. Replies: 6
    Last Post: Oct 15, 2012, 6:20 AM
  2. [CLOSED] Nested data in nested grids
    By FAS in forum 1.x Premium Help
    Replies: 16
    Last Post: Apr 19, 2012, 7:51 PM
  3. [CLOSED] Nested dynamic gridpanel
    By SouthDeveloper in forum 1.x Premium Help
    Replies: 4
    Last Post: Jun 23, 2011, 7:08 PM
  4. Nested Grouping in GridPanel
    By BGeorge in forum Feature Requests
    Replies: 8
    Last Post: Nov 18, 2010, 6:53 AM
  5. GridPanel Nested Grouping
    By yaser82 in forum 1.x Help
    Replies: 0
    Last Post: May 24, 2009, 6:43 AM

Tags for this Thread

Posting Permissions