[CLOSED] Layout School Part I: GridPanels inside a TabPanel inside a ViewPort

  1. #1

    [CLOSED] Layout School Part I: GridPanels inside a TabPanel inside a ViewPort

    So after a longer discussion about how to layout things in ext.net I got this example from Daniil that in parts explained/showed a way to layout a certain thing.

    That example looks like this image; it resizes everything (the TopBars, the GridPanels).
    Click image for larger version. 

Name:	delme.png 
Views:	469 
Size:	35.5 KB 
ID:	2738

    However, lets say I really want a TabPanel with two TabPages, and in each of those TabPages I want to have one or more GridPanels? The code below is a runnable example of that. Its a copy of Daniils example with the difference that I inside the <ViewPort><Items> instead but the TabPanel, create two Panels (the tabPages) and then place two GridPanels on each. Looks like this:

    Click image for larger version. 

Name:	delme.png 
Views:	400 
Size:	26.4 KB 
ID:	2739

    As you can see it doesnt auto adjust the height in the gridpanels anymore - only one row. If I then set AutoHeight="true" on the top GridPanel it expands to show all rows, but the second GridPanel disappears completely (ie height becomes like 0 px).
    If I set AutoHeight="true" on the bottom GridPanel then nothing happens - both GridPanels only show one row.

    If you resize the window, the TabPanel seems to be resized but the GridPanels does not follow. Neither MonitorResize nor AutoWidth helps. Flex="1" doesnt seem to matter at all?

    I have played around with setting different Layouts on the (tab)Panels, to no avail.

    So, the first organized "layout school" post from my side ;-) What do you suggest?


    Here is the runnable example:

    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[] 
                { 
                    new object[] { "test11", "test12", "test13" },
                    new object[] { "test12", "test22", "test23" },
                    new object[] { "test13", "test32", "test33" }
                };
                this.Store1.DataBind();
            }
        }
    </script>
     
    <!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 id="Head1" runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="test1" />
                        <ext:RecordField Name="test2" />
                        <ext:RecordField Name="test3" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
    
        <ext:Viewport ID="Viewport1" runat="server" Layout="VBoxLayout">
            <LayoutConfig>
                <ext:VBoxLayoutConfig Align="Stretch" />
            </LayoutConfig>
            <Items>
                <ext:TabPanel runat="server">
                    <Items>
                        
                        <ext:Panel runat="server" Title="Panel 1">
                            
                            <Items>
                                <ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" Flex="1">
                                    <TopBar>
                                        <ext:Toolbar ID="Toolbar1" runat="server">
                                            <Items>
                                                <ext:DisplayField ID="DisplayField1" runat="server" Text="Hello!" />
                                                <ext:Button ID="Button1" runat="server" Text="Button" StandOut="true" />
                                            </Items>
                                        </ext:Toolbar>
                                    </TopBar>
                                    <ColumnModel ID="ColumnModel1" runat="server">
                                        <Columns>
                                            <ext:Column Header="Test1" DataIndex="test1" />
                                            <ext:Column Header="Test2" DataIndex="test2" />
                                            <ext:Column Header="Test3" DataIndex="test3" />
                                        </Columns>
                                    </ColumnModel>
                                    <View>
                                        <ext:GridView ID="GridView1" runat="server" ForceFit="true" />
                                    </View>
                                </ext:GridPanel>
                                <ext:GridPanel ID="GridPanel2" runat="server" StoreID="Store1" Flex="1">
                                    <TopBar>
                                        <ext:Toolbar ID="Toolbar2" runat="server">
                                            <Items>
                                                <ext:DisplayField ID="DisplayField2" runat="server" Text="Hello!" />
                                                <ext:Button ID="Button2" runat="server" Text="Button" StandOut="true" />
                                            </Items>
                                        </ext:Toolbar>
                                    </TopBar>
                                    <ColumnModel ID="ColumnModel2" runat="server">
                                        <Columns>
                                            <ext:Column Header="Test1" DataIndex="test1" />
                                            <ext:Column Header="Test2" DataIndex="test2" />
                                            <ext:Column Header="Test3" DataIndex="test3" />
                                        </Columns>
                                    </ColumnModel>
                                    <View>
                                        <ext:GridView ID="GridView2" runat="server" ForceFit="true" />
                                    </View>
                                </ext:GridPanel>
                            </Items>
                        </ext:Panel>
    
                        <ext:Panel ID="Panel1" runat="server" Title="Panel 2">
                            <Items>
                                <ext:GridPanel ID="GridPanel3" runat="server" StoreID="Store1" Flex="1">
                                    <TopBar>
                                        <ext:Toolbar ID="Toolbar3" runat="server">
                                            <Items>
                                                <ext:DisplayField ID="DisplayField3" runat="server" Text="Hello!" />
                                                <ext:Button ID="Button3" runat="server" Text="Button" StandOut="true" />
                                            </Items>
                                        </ext:Toolbar>
                                    </TopBar>
                                    <ColumnModel ID="ColumnModel3" runat="server">
                                        <Columns>
                                            <ext:Column Header="Test1" DataIndex="test1" />
                                            <ext:Column Header="Test2" DataIndex="test2" />
                                            <ext:Column Header="Test3" DataIndex="test3" />
                                        </Columns>
                                    </ColumnModel>
                                    <View>
                                        <ext:GridView ID="GridView3" runat="server" ForceFit="true" />
                                    </View>
                                </ext:GridPanel>
                                <ext:GridPanel ID="GridPanel4" runat="server" StoreID="Store1" Flex="1">
                                    <TopBar>
                                        <ext:Toolbar ID="Toolbar4" runat="server">
                                            <Items>
                                                <ext:DisplayField ID="DisplayField4" runat="server" Text="Hello!" />
                                                <ext:Button ID="Button4" runat="server" Text="Button" StandOut="true" />
                                            </Items>
                                        </ext:Toolbar>
                                    </TopBar>
                                    <ColumnModel ID="ColumnModel4" runat="server">
                                        <Columns>
                                            <ext:Column Header="Test1" DataIndex="test1" />
                                            <ext:Column Header="Test2" DataIndex="test2" />
                                            <ext:Column Header="Test3" DataIndex="test3" />
                                        </Columns>
                                    </ColumnModel>
                                    <View>
                                        <ext:GridView ID="GridView4" runat="server" ForceFit="true" />
                                    </View>
                                </ext:GridPanel>
                            </Items>
                        </ext:Panel>
    
                    </Items>
                </ext:TabPanel>
            </Items>
        </ext:Viewport>
    
        
        </form>
    </body>
    </html>
    Last edited by Daniil; May 21, 2011 at 11:03 AM. Reason: [CLOSED]
  2. #2
    Hi,

    1. Let me first re-state the following from http://forums.ext.net/showthread.php?13732#post56936:

    Officially, the GridPanel requires either the .Height to be set, or the GridPanel must be controlled by a Parent Container with a .Layout set.

    Its possible the .AutoHeight property may work in some scenarios, but as a general rule should not be used. Set the .height, or use a Layout to control its sizing, such as FitLayout.
    You state:

    If I then set AutoHeight="true" on the top GridPanel it expands to show all rows, but the second GridPanel disappears completely (ie height becomes like 0 px).
    Correct. As mentioned above, the .AutoHeight property will not work in all situations. If it works, great. If it doesn't, then another approach is required.

    2. In your code sample above, configuring Layout="VBoxLayout" on the Viewport is not really effective because you only have one Component (a TabPanel) in the Viewports <Items> Collection. VBoxLayout is generally only relevant when two or more Components are added to the <Items> Collection.

    In your sample I would use a FitLayout instead of VBox.

    3. In your "Panel 1" and "Panel 2" you have no Layout configured. If Components are added to the <Items> Collection and no .Layout is configured on the Container, then "ContainerLayout" is assumed. As stated in the other thread...

    The ContainerLayout is basically "no layout". The child components are still added to the .Items Collections, but their Layouts are not really managed.
    You effectively have no layout in the Panels, so the GridPanel must be configured with a .Height. If no .Height property is configured you will get unexpected results.

    4. Set .Layout="VBoxLayout" on the two Panels. Also add the <LayoutConfig> if you want.

    Example

    <LayoutConfig>
        <ext:VBoxLayoutConfig Align="Stretch" />
    </LayoutConfig>
    5. Forget that .MonitorResize and .AutoWidth properties exist. Don't use them. The .AutoHeight properties does have it's purpose with some Container type Components, but it should not be used with a GridPanel.

    MonitorResize="true" - not required on anything. Remove all instances of this property.
    AutoHeight="true" - Generally not required, especially if Parent container has a .Layout set.
    AutoWidth="true" - I don't think this is ever required. You should be able to remove all instances of this property.
    6. Here's your sample above with .Layout modifications.

    Example

    <%@ Page Language="C#" %>
      
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
      
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[] 
                { 
                    new object[] { "test11", "test12", "test13" },
                    new object[] { "test12", "test22", "test23" },
                    new object[] { "test13", "test32", "test33" }
                };
                
                this.Store1.DataBind();
            }
        }
    </script>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html>
    <head runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
        
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="test1" />
                            <ext:RecordField Name="test2" />
                            <ext:RecordField Name="test3" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
     
            <ext:Viewport runat="server" Layout="FitLayout">
                <Items>
                    <ext:TabPanel runat="server">
                        <Items>
                            <ext:Panel runat="server" Title="Panel 1" Layout="VBoxLayout">
                                <LayoutConfig>
                                    <ext:VBoxLayoutConfig Align="Stretch" />
                                </LayoutConfig>
                                <Items>
                                    <ext:GridPanel runat="server" StoreID="Store1" Flex="1">
                                        <TopBar>
                                            <ext:Toolbar runat="server">
                                                <Items>
                                                    <ext:DisplayField runat="server" Text="Hello!" />
                                                    <ext:Button runat="server" Text="Button" StandOut="true" />
                                                </Items>
                                            </ext:Toolbar>
                                        </TopBar>
                                        <ColumnModel runat="server">
                                            <Columns>
                                                <ext:Column Header="Test1" DataIndex="test1" />
                                                <ext:Column Header="Test2" DataIndex="test2" />
                                                <ext:Column Header="Test3" DataIndex="test3" />
                                            </Columns>
                                        </ColumnModel>
                                        <View>
                                            <ext:GridView runat="server" ForceFit="true" />
                                        </View>
                                    </ext:GridPanel>
                                    <ext:GridPanel runat="server" StoreID="Store1" Flex="1">
                                        <TopBar>
                                            <ext:Toolbar runat="server">
                                                <Items>
                                                    <ext:DisplayField runat="server" Text="Hello!" />
                                                    <ext:Button runat="server" Text="Button" StandOut="true" />
                                                </Items>
                                            </ext:Toolbar>
                                        </TopBar>
                                        <ColumnModel runat="server">
                                            <Columns>
                                                <ext:Column Header="Test1" DataIndex="test1" />
                                                <ext:Column Header="Test2" DataIndex="test2" />
                                                <ext:Column Header="Test3" DataIndex="test3" />
                                            </Columns>
                                        </ColumnModel>
                                        <View>
                                            <ext:GridView runat="server" ForceFit="true" />
                                        </View>
                                    </ext:GridPanel>
                                </Items>
                            </ext:Panel>
     
                            <ext:Panel ID="Panel1" runat="server" Title="Panel 2" Layout="VBoxLayout">
                                <LayoutConfig>
                                    <ext:VBoxLayoutConfig Align="Stretch" />
                                </LayoutConfig>
                                <Items>
                                    <ext:GridPanel runat="server" StoreID="Store1" Flex="1">
                                        <TopBar>
                                            <ext:Toolbar runat="server">
                                                <Items>
                                                    <ext:DisplayField runat="server" Text="Hello!" />
                                                    <ext:Button runat="server" Text="Button" StandOut="true" />
                                                </Items>
                                            </ext:Toolbar>
                                        </TopBar>
                                        <ColumnModel runat="server">
                                            <Columns>
                                                <ext:Column Header="Test1" DataIndex="test1" />
                                                <ext:Column Header="Test2" DataIndex="test2" />
                                                <ext:Column Header="Test3" DataIndex="test3" />
                                            </Columns>
                                        </ColumnModel>
                                        <View>
                                            <ext:GridView runat="server" ForceFit="true" />
                                        </View>
                                    </ext:GridPanel>
                                    <ext:GridPanel runat="server" StoreID="Store1" Flex="1">
                                        <TopBar>
                                            <ext:Toolbar runat="server">
                                                <Items>
                                                    <ext:DisplayField runat="server" Text="Hello!" />
                                                    <ext:Button runat="server" Text="Button" StandOut="true" />
                                                </Items>
                                            </ext:Toolbar>
                                        </TopBar>
                                        <ColumnModel runat="server">
                                            <Columns>
                                                <ext:Column Header="Test1" DataIndex="test1" />
                                                <ext:Column Header="Test2" DataIndex="test2" />
                                                <ext:Column Header="Test3" DataIndex="test3" />
                                            </Columns>
                                        </ColumnModel>
                                        <View>
                                            <ext:GridView runat="server" ForceFit="true" />
                                        </View>
                                    </ext:GridPanel>
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:TabPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Hope this helps.
    Geoffrey McGill
    Founder
  3. #3
    Thanks for the quick answer Geoffrey and your comments.

    I shall take what you say in, and have tried doing so in my next question (Part II). =)
  4. #4
    Geoffrey McGill
    Founder

Similar Threads

  1. [CLOSED] Layout School Part III: Why doesnt the UserControl show up
    By wagger in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: May 20, 2011, 8:10 AM
  2. Replies: 10
    Last Post: May 19, 2011, 7:43 AM
  3. Layout problem of a GridPanel inside TabPanel
    By omeriko9 in forum 1.x Help
    Replies: 1
    Last Post: Mar 15, 2011, 2:06 AM
  4. Replies: 9
    Last Post: Oct 07, 2010, 6:27 PM
  5. [CLOSED] [0.8] Two Gridpanels inside ColumnLayout inside Tab
    By Yevgeniy in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 30, 2010, 7:12 PM

Tags for this Thread

Posting Permissions