[CLOSED] Layout stretching panels and grid panels vertically and horizontally to fill browser window

  1. #1

    [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.
  2. #2
    Hello @rmelancon!

    I'm not sure how you come up with the example you provided but there are some points to consider:

    - I don't see much of a reason using BorderLayout if you are adding just a single component to the viewport. Besides, adding a component to north is expected to leave space for east, west, and south regions. The center region would be best. But as there is just one component immediately inside the viewport, a FitLayout would be more appropriate. Or just skip the "outer panel", setting the viewport with a stretch VboxLayout for the "panel rows" in your view.
    - If you specify a <LayoutConfig> block, there's no point in setting Layout="ChosenLayout" as it would get overridden by the layout block.
    - Complex layouts can get really tricky if you try to make them in a big-bang integration approach, that is, add all components and then just try to adjust their layouts until they fit right. Best way is to iteratively add the components from outside to inside, making they fit best in every layer before proceeding to the next one.

    In that approach, I could come up with this example. It was better to start from scratch and just copy your grid than actually following your code sample, so I tried to make the inner panels' limits clear by coloring the page with the different UI colors Ext.NET has. And that's what I could come up with, always moving from outer to inners, then to the grid panel.

    If you really need to fancy a very specific layout set up, maybe the best idea would be to just make an initial, static layout that works, and then bind the window's resize event to fit all panels to the available display area programmatically.

    <%@ Page Language="vb" %>
    
    <!DOCTYPE html>
    
    <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>
    
    <html>
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            var overIt = function () {
                console.log('over handler');
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager runat="server" />
            <ext:Viewport ID="vp1" runat="server" Layout="FitLayout" Scrollable="Both">
                <Items>
                    <ext:Panel
                        ID="outerPn"
                        runat="server"
                        Title="outer"
                        Frame="true"
                        MinWidth="900"
                        MinHeight="600"
                        >
                        <LayoutConfig>
                            <ext:VBoxLayoutConfig Align="Stretch" />
                        </LayoutConfig>
                        <Items>
                            <ext:Panel
                                ID="upperPn"
                                runat="server"
                                Title="upper"
                                Flex="1"
                                Frame="true"
                                UI="Info"
                                >
                                <LayoutConfig>
                                    <ext:HBoxLayoutConfig Pack="Center" Align="Stretch" />
                                </LayoutConfig>
                                <Items>
                                    <ext:Panel ID="iup1" runat="server" Title="Inner Upper Panel 1" Flex="1" Frame="true" />
                                    <ext:Panel ID="iup2" runat="server" Title="Inner Upper Panel 2" Flex="1" Frame="true" UI="Success" />
                                    <ext:Panel ID="iup3" runat="server" Title="Inner Upper Panel 3" Flex="1" Frame="true" Padding="10">
                                        <Items>
                                            <ext:Button runat="server" Text="Button 1" />
                                        </Items>
                                    </ext:Panel>
                                </Items>
                            </ext:Panel>
                            <ext:Panel
                                ID="lowerPn"
                                runat="server"
                                Title="lower"
                                Flex="3"
                                Frame="true"
                                >
                                <LayoutConfig>
                                    <ext:HBoxLayoutConfig Pack="Center" Align="Stretch" />
                                </LayoutConfig>
                                <Items>
                                    <ext:Panel ID="idn1" runat="server" Title="Inner Lower Panel 1" Flex="2" Frame="true" UI="Danger" Layout="FitLayout">
                                        <Items>
                                            <ext:GridPanel
                                                ID="GridPanel1"
                                                runat="server"
                                                Title="Array Grid"
                                                BodyPadding="15"
                                                Padding="10"
                                                HeightSpec="100%"
                                                >
                                                <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>
                                        </Items>
                                    </ext:Panel>
                                    <ext:Panel ID="idn2" runat="server" Title="Inner Lower Panel 2" Flex="1" Frame="true" />
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Viewport>
        </div>
        </form>
    </body>
    </html>
    I hope this helps! I believe in the least, this would help you get started with the page!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thank you, that example is immensely helpful!
  4. #4
    Hello @rmelacon!

    Glad it was of help! Thank you for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Default layout for all panels
    By Hlodvig in forum 2.x Help
    Replies: 0
    Last Post: Aug 21, 2013, 10:16 AM
  2. [CLOSED] Using Layout accordion card showing all Panels every time
    By ViDom in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Sep 14, 2012, 1:29 PM
  3. [CLOSED] So many panels and nested panels
    By thchuong in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 03, 2012, 5:23 AM
  4. Replies: 3
    Last Post: Nov 30, 2011, 10:39 AM
  5. Replies: 0
    Last Post: May 28, 2010, 4:40 PM

Posting Permissions