[CLOSED] Auto GridPanel Height To Fill Available Space

  1. #1

    [CLOSED] Auto GridPanel Height To Fill Available Space

    Hey all,

    Very quick and easy question - I cannot get a gridpanel to autosize to fill the remaining space on the screen. In general this gridpanel will only have 3-5 rows visible, but I need it to fill the entire remaining part of the screen.

    Below is the example I am working with, am I missing something very obvious? I've tried a ton of different layout modes and checked the docs and am coming up short...below is a simplified example and as you can see even with autoheight the gridpanel does not grow vertically to fill the page.

    (please forgive the extra formatting but I wanted to replicate the general style of the page).

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Test1.aspx.vb" Inherits="Software_Asset_Tracking_System.Test1" %>
    <%@ 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></title>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <ext:Viewport runat="server" >
        <Items>
            <ext:TabPanel runat="server" >
            <Items>
                <ext:Panel runat="server" Title="Tab1" AutoScroll="true" AutoHeight="true" >
                    <Items>
                        <ext:Panel runat="server" Layout="FormLayout" Height="80px" >
                        <Items>
                            <ext:TextField runat="server" FieldLabel="Field 1" />
                            <ext:TextField runat="server" FieldLabel="Field 2" />
                            <ext:TextField runat="server" FieldLabel="Field 3" />
                        </Items>
                        </ext:Panel>
                        <ext:GridPanel runat="server" AutoHeight="true" >
                        <Store>
                            <ext:Store runat="server" >
                            <Reader>
                                <ext:JsonReader >
                                <Fields>
                                </Fields>
                                </ext:JsonReader>
                            </Reader>
                            </ext:Store>
                        </Store>
                        <ColumnModel>
                        <Columns>
                            <ext:Column Header="Column 1" />
                            <ext:Column Header="Column 2" />
                        </Columns>
                        </ColumnModel>
                        <BottomBar>
                        <ext:PagingToolbar runat="server" >
                        </ext:PagingToolbar>
                        </BottomBar>
                        </ext:GridPanel>
                    </Items>
                </ext:Panel>
            </Items>
            </ext:TabPanel>
        </Items>
        </ext:Viewport>
        </div>
        </form>
    </body>
    </html>
    Last edited by Daniil; May 10, 2012 at 12:53 PM. Reason: [CLOSED]
  2. #2
    Hi,

    For you case I can suggest the following layout.

    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>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Viewport runat="server" Layout="FitLayout">
                <Items>
                    <ext:TabPanel runat="server">
                        <Items>
                            <ext:Panel runat="server" Title="Tab 1" Layout="VBoxLayout">
                                <Items>
                                    <ext:Container runat="server" Layout="FormLayout">
                                        <Items>
                                            <ext:TextField runat="server" FieldLabel="Field 1" />
                                            <ext:TextField runat="server" FieldLabel="Field 2" />
                                            <ext:TextField runat="server" FieldLabel="Field 3" />
                                        </Items>
                                    </ext:Container>
                                    <ext:GridPanel runat="server" Flex="1">
                                        <Store>
                                            <ext:Store runat="server" />
                                        </Store>
                                        <ColumnModel>
                                            <Columns>
                                                <ext:Column Header="Column 1" />
                                                <ext:Column Header="Column 2" />
                                            </Columns>
                                        </ColumnModel>
                                        <BottomBar>
                                            <ext:PagingToolbar runat="server" />
                                        </BottomBar>
                                    </ext:GridPanel>
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:TabPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>

Similar Threads

  1. Vertical Auto Height
    By Zdenek in forum 1.x Help
    Replies: 5
    Last Post: Dec 01, 2011, 8:34 PM
  2. problem with ext panel auto height
    By venu.sn2009 in forum 1.x Help
    Replies: 2
    Last Post: Aug 10, 2011, 8:12 AM
  3. How to set auto height for a panel?
    By ganesh.tony in forum 1.x Help
    Replies: 0
    Last Post: Jul 01, 2011, 5:26 AM
  4. [CLOSED] [1.0] Panel layout adding horizontal space to height
    By state in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 20, 2009, 6:42 AM
  5. [CLOSED] Auto Height
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 19, 2008, 6:43 AM

Posting Permissions