[CLOSED] Border layout with a toolbar in the centre section, the toolbar floats at the top? How can I stop this...

  1. #1

    [CLOSED] Border layout with a toolbar in the centre section, the toolbar floats at the top? How can I stop this...

    Hi

    Ext.Net RC v1.0
    .NET 3.5
    Vista Business

    I've cut out all the irrelevant bits from our page layout and merged user control code into one file to provide a sample page. Basically we have a border layout in a master page with a top section for a header and a center panel for the page content. One one of the pages the page content is a toolbar (contained in a user control) and a grid (contained in a second user control). When you merge the code of the user controls into one page you get an example (As below). What happens is that the toolbar floats at the top of the screen (over the top of the blue header!) whereas I want it to just appear below the blue header and above the grid and the grid must fill the entire available screen (hence the fit layout).

    What's going on here and how can I fix it?

    There are server comments around the parts of the layout which are normally contained in user controls to identify them.

    
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ext_forum_post_autoheight_monitorresize.aspx.cs" Inherits="OSyS.Kms._Ext._temp_.ext_forum_post" %>
    
    <%@ 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 id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="ViewPortMain" runat="server" Layout="border">
            <Items>
                <ext:Panel ID="headerPanel" runat="server" Border="false" Region="North" Height="76">
                    <Content>
                        <ext:Panel runat="server" ID="Header" Border="false">
                            <Content>
                                <div  style="height: 76px;background-color:blue" id="divHeaderBar" runat="server">                             
                                </div>
                            </Content>
                        </ext:Panel>
                    </Content>
                </ext:Panel>
                <ext:Panel ID="mainPanel" runat="server" Border="false" Region="Center" BodyStyle="background-color : #9493A3;">
                    <Content>
                        <%-- TOOBAR USER CONTROL --%>
                        <ext:Toolbar ID="toolbar1" Cls="kmsToolbar" runat="server">
                            <Items>
                                <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                                <ext:Button ID="btnAdd" runat="server" Text="Add PHA" Icon="Add" AutoPostBack="true">
                                    <ToolTips>
                                        <ext:ToolTip ID="ToolTip1" runat="server" Title="Add PHA" />
                                    </ToolTips>
                                </ext:Button>
                                <ext:Button ID="btnCopy" runat="server" Text="Copy" Icon="PageCopy" AutoPostBack="true">
                                    <ToolTips>
                                        <ext:ToolTip ID="ToolTip2" runat="server" Title="Copy" />
                                    </ToolTips>
                                </ext:Button>
                                <ext:ToolbarSeparator />
                                <ext:Button ID="btnSearch" runat="server" Text="Search & Report" Icon="PageFind" AutoPostBack="true">
                                    <ToolTips>
                                        <ext:ToolTip ID="ToolTip3" runat="server" Title="Search & Report" />
                                    </ToolTips>
                                </ext:Button>
                                <ext:ToolbarSeparator />
                                <ext:Button ID="btnAdvanceSearch" runat="server" Text="Keyword Search" Icon="Magnifier" AutoPostBack="true">
                                    <ToolTips>
                                        <ext:ToolTip ID="ToolTip4" runat="server" Title="Keyword Search" />
                                    </ToolTips>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                        <%-- END TOOBAR USER CONTROL --%>
                        <%-- GRID USER CONTROL --%>
                        <ext:FitLayout ID="FitLayout1" runat="server">
                            <Items>
                                <ext:GridPanel ID="gridTaskSummary" Layout="fit" runat="server" StripeRows="true" Title="My Assignments">
                                    <Items>
                                        <ext:Hidden ID="gridData" runat="server" />
                                        <ext:Hidden ID="dateFormat" runat="server" />
                                        <ext:Container ID="Container1" runat="server">
                                            <Content>
                                                
                                            </Content>
                                        </ext:Container>
                                    </Items>
                                    <Store>
                                        <ext:Store ID="storeTaskSummary" runat="server" AutoLoad="true">
                                            <Reader>
                                                <ext:ArrayReader>
                                                    <Fields>
                                                        <ext:RecordField Name="UnitID" Mapping="UnitID" />
                                                        <ext:RecordField Name="UnitName" Mapping="UnitName" Type="String" />
                                                        <ext:RecordField Name="Title" Mapping="Title" Type="String" />
                                                        <ext:RecordField Name="Description" Mapping="Description" Type="String" />
                                                        <ext:RecordField Name="ReferenceNumber" Mapping="ReferenceNumber" Type="String" />
                                                        <ext:RecordField Name="TargetDate" Mapping="TargetDate" Type="Date" />
                                                        <ext:RecordField Name="URL" Mapping="Url" Type="String" />
                                                        <ext:RecordField Name="Type" Mapping="Type" />
                                                    </Fields>
                                                </ext:ArrayReader>
                                            </Reader>
                                        </ext:Store>
                                    </Store>
                                    <TopBar>
                                        <ext:Toolbar ID="Toolbar2" runat="server">
                                            <Items>
                                                <ext:ToolbarFill ID="ToolbarFill2" runat="server" />
    
                                            </Items>
                                        </ext:Toolbar>
                                    </TopBar> 
                                </ext:GridPanel>
                            </Items>
                        </ext:FitLayout>
                        <%-- END GRID USER CONTROL --%>
                    </Content>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by Daniil; Mar 15, 2011 at 7:12 AM. Reason: [CLOSED]
  2. #2
    Hi,

    1. It's a wrong thing:
    <ext:Container runat="server">
        <Content>
            <ext:Container runat="server" />
            <ext:FitLayout runat="server">
                <Items>
                    <ext:Container runat="server" />
                </Items>
            </ext:FitLayout>
            <ext:Container runat="server"></ext:Container>
        </Content>
    </ext:Container>
    Generally speaking, a layout control must be a top level container's item.

    2. GridPanel doesn't support <Items> collection.

    We can suggest you to use the VBox layout.

    Example .aspx
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register Src="~/Toolbar.ascx" TagPrefix="uc" TagName="Toolbar" %>
    <%@ Register Src="~/GridPanel.ascx" TagPrefix="uc" TagName="GridPanel" %>
    <!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="border">
            <Items>
                <ext:Panel runat="server" Region="North" Height="76">
                    <Content>
                        <div style="height: 76px; background-color: blue">
                        </div>
                    </Content>
                </ext:Panel>
                <ext:Panel 
                    runat="server" 
                    Region="Center" 
                    BodyStyle="background-color : #9493A3;"
                    Layout="VBoxLayout">
                    <LayoutConfig>
                        <ext:VBoxLayoutConfig Align="Stretch" />
                    </LayoutConfig>
                    <Items>
                        <ext:Container runat="server" Height="28">
                            <Content>
                                <uc:Toolbar runat="server" />
                            </Content>
                        </ext:Container>
                        <ext:Container runat="server" Flex="1">
                            <Content>
                                <uc:GridPanel runat="server" />
                            </Content>
                        </ext:Container>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>

    Toolbar.ascx

    <%@ Control Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <ext:FitLayout runat="server">
        <Items>
            <ext:Toolbar runat="server">
                <Items>
                    <ext:DisplayField runat="server" Text="I'm Toolbar" />
                </Items>
            </ext:Toolbar>
        </Items>
    </ext:FitLayout>
    GridPanel.ascx
    <%@ Control 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)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test11", "test12", "test13" },
                    new object[] { "test12", "test22", "test23" },
                    new object[] { "test13", "test32", "test33" }
                };
                store.DataBind();
            }
        }
    </script>
    
    <ext:FitLayout runat="server">
        <Items>
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test1" />
                                    <ext:RecordField Name="test2" />
                                    <ext:RecordField Name="test3" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test1" />
                        <ext:Column Header="Test2" DataIndex="test2" />
                        <ext:Column Header="Test3" DataIndex="test3" />
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </Items>
    </ext:FitLayout>

Similar Threads

  1. Replies: 3
    Last Post: Jul 01, 2013, 6:24 AM
  2. [CLOSED] ParseControl with an Ext.Net layout section
    By sadaf in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 15, 2011, 9:31 AM
  3. Replies: 7
    Last Post: May 25, 2011, 9:35 AM
  4. Replies: 0
    Last Post: Feb 01, 2010, 5:44 AM
  5. Flat Toolbar/button - stop hover image
    By Tbaseflug in forum 1.x Help
    Replies: 1
    Last Post: Jun 17, 2009, 6:03 PM

Tags for this Thread

Posting Permissions