[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.
Code:
<%@ 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.
