Mar 21, 2017, 2:43 PM
[CLOSED] Layout stretching panels and grid panels vertically and horizontally to fill browser window
I have a page with several panels and the goal is to expand them both horizontally and vertically to fill the entire browser window, regardless of the users screen resolution. In addition I want to set a minimum resolution that we will "support", meaning it should look good at the lowest resolution we support but will look better and have less or no scroll bars at larger resolutions. If the resolution is below our minimum, scroll bars will allow the user to see things outside the minimum resolution. The horizontal width seems to flex fine but vertically, the grid is basically defining the height of the second row of panels depending on the grids page size or less if the grid has only 2 rows. Panel 5 in my example will have a chart and I want that to be as big as possible, even if the grid only has two rows. If I set a MinHeight on the grid then the flex doesn't work for larger vertical resolution. Hope this explains what I'm trying to accomplish. Thanks in advance.
<script runat="server">
Private ReadOnly Property TestData() As Object()
Get
Dim now As DateTime = DateTime.Now
Return New Object() {New Object() {"3m Co", 71.72, 0.02, 0.03, now}, New Object() {"Alcoa Inc", 29.01, 0.42, 1.47, now}, New Object() {"Altria Group Inc", 83.81, 0.28, 0.34, now}, New Object() {"American Express Company", 52.55, 0.01, 0.02, now}, New Object() {"American International Group, Inc.", 64.13, 0.31, 0.49, now}, New Object() {"AT&T Inc.", 31.61, -0.48, -1.54, now}, _
New Object() {"Boeing Co.", 75.43, 0.53, 0.71, now}, New Object() {"Caterpillar Inc.", 67.27, 0.92, 1.39, now}, New Object() {"Citigroup, Inc.", 49.37, 0.02, 0.04, now}, New Object() {"E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now}, New Object() {"Exxon Mobil Corp", 68.1, -0.43, -0.64, now}, New Object() {"General Electric Company", 34.14, -0.08, -0.23, now}, _
New Object() {"Government Motors Corporation", 30.27, 1.09, 3.74, now}, New Object() {"Hewlett-Packard Co.", 36.53, -0.03, -0.08, now}, New Object() {"Honeywell Intl Inc", 38.77, 0.05, 0.13, now}, New Object() {"Intel Corporation", 19.88, 0.31, 1.58, now}, New Object() {"International Business Machines", 81.41, 0.44, 0.54, now}, New Object() {"Johnson & Johnson", 64.72, 0.06, 0.09, now}, _
New Object() {"JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now}, New Object() {"McDonald""s Corporation", 36.76, 0.86, 2.4, now}, New Object() {"Merck & Co., Inc.", 40.96, 0.41, 1.01, now}, New Object() {"Microsoft Corporation", 25.84, 0.14, 0.54, now}, New Object() {"Pfizer Inc", 27.96, 0.4, 1.45, now}, New Object() {"The Coca-Cola Company", 45.07, 0.26, 0.58, now}, _
New Object() {"The Home Depot, Inc.", 34.64, 0.35, 1.02, now}, New Object() {"The Procter & Gamble Company", 61.91, 0.01, 0.02, now}, New Object() {"United Technologies Corporation", 63.26, 0.55, 0.88, now}, New Object() {"Verizon Communications", 35.57, 0.39, 1.11, now}, New Object() {"Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now}}
End Get
End Property
Protected Sub Page_Load(sender As Object, e As EventArgs)
If Not Ext.Net.X.IsAjaxRequest Then
Me.Store1.DataSource = Me.TestData
End If
End Sub
Protected Sub MyData_Refresh(sender As Object, e As StoreReadDataEventArgs)
Me.Store1.DataSource = Me.TestData
Me.Store1.DataBind()
End Sub
</script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
<Items>
<ext:Container runat="server" Region="North" layout="VBoxLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch"></ext:VBoxLayoutConfig>
</LayoutConfig>
<Items>
<ext:Panel runat="server">
<Items>
<ext:Container runat="server" Layout="HBoxLayout" Flex="1">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch"></ext:HBoxLayoutConfig>
</LayoutConfig>
<Items>
<ext:Panel ID="pnlAccountDetails" runat="server"
Title="Details"
BodyPadding="15"
Flex="1"
Padding="10">
<Items>
<ext:GridPanel runat="server" ID="gpAccountDetails"
HideHeaders="true">
<Store>
<ext:Store runat="server" ID="StoreAccountDetails">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="FieldName"></ext:ModelField>
<ext:ModelField Name="FieldValue"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="FieldName" Flex="1" DataIndex="FieldName"></ext:Column>
<ext:column runat="server" Text="FieldValue" Flex="1" DataIndex="FieldValue"></ext:column>
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Panel>
<ext:Panel ID="pnlCurrentInvestmentDetails" runat="server"
Title="Details 2"
BodyPadding="15"
Padding="10"
Flex="1">
<Items>
<ext:GridPanel runat="server" ID="gpCurrentInvestmentDetails"
HideHeaders="true">
<Store>
<ext:Store runat="server" ID="StoreCurrentInvestmentDetails">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="FieldName"></ext:ModelField>
<ext:ModelField Name="FieldValue"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="FieldName" Flex="1" DataIndex="FieldName"></ext:Column>
<ext:column runat="server" Text="FieldValue" Flex="1" DataIndex="FieldValue"></ext:column>
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Panel>
<ext:Panel ID="pnlActions" runat="server"
Title="Actions"
BodyPadding="15"
Padding="10"
Flex="1"
>
<Items>
<ext:Button runat="server" ID="btnSettings" Text="Settings">
</ext:Button>
</Items>
</ext:Panel>
</Items>
</ext:Container>
<ext:Container runat="server" Layout="HBoxLayout" Flex="1">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch"></ext:HBoxLayoutConfig>
</LayoutConfig>
<Items>
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Array Grid"
BodyPadding="15"
Padding="10"
Flex="2">
<Store>
<ext:Store
ID="Store1"
runat="server"
RemoteSort="false"
OnReadData="MyData_Refresh"
PageSize="10">
<Model>
<ext:Model runat="server" IDProperty="company">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Company" DataIndex="company" Flex="1">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Price" Width="75" DataIndex="price">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Change" Width="75" DataIndex="change" />
<ext:Column runat="server" Text="Change" Width="75" DataIndex="pctChange" />
<ext:DateColumn
runat="server"
Text="Last Updated"
Width="120"
DataIndex="lastChange"
Format="HH:mm:ss" />
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar runat="server" />
</BottomBar>
</ext:GridPanel>
<ext:Panel
ID="panAllocation"
Title="Panel 5"
Border="false"
runat="server"
padding="10"
Flex="1">
<Content>
<div id="chart" ></div>
</Content>
</ext:Panel>
</Items>
</ext:Container>
</Items>
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:ToolbarFill></ext:ToolbarFill>
<ext:Button runat="server" Text="Apply"></ext:Button>
<ext:Button runat="server" Text="Cancel"></ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
</Items>
</ext:Container>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by fabricio.murta; Mar 22, 2017 at 6:43 PM.