What's New?

[CLOSED] Portal header layout

  1. #1
    Aug 05, 2013, 1:47 PM

    [CLOSED] Portal header layout

    Hi,
    I can' t render this simple layout for my portal header.
    It consists of three images tiled horizontally. The central one should be streched to fill up the space. Image size should be kept original.
    Below a standard toolbar toolbar should appear.

    My problem is that images are not displayed. Only the toolbar shows up.
    Thanks in advance
    Marco

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Header.ascx.cs" Inherits="renosistemi.it.Controls.Header" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<ext:Panel ID="pnlHeader" runat="server" Border="false" Layout="HBoxLayout" AnchorHorizontal="100%"  BodyStyle="background-color: transparent;"   >
                                            <Items>
                                    <ext:Image  runat="server" ImageUrl="~/Images/Logo_Left.png"  />
                                    <ext:Image runat="server"  ImageUrl="~/Images/Logo_Center.png" Flex="1"  />
                                    <ext:Image runat="server" ImageUrl="~/Images/Logo_Right.png" />
</Items>
</ext:Panel>   
         <ext:Toolbar ID="Toolbar1" runat="server" Cls="mytoolbar"  >
            <Items>
                <ext:Button runat="server" Text="Home" HrefTarget="_self" Href="~/Default.aspx" />
                <ext:ToolbarSeparator  runat="server" />
                <ext:Button runat="server" Text="Sale" HrefTarget="_self" Href="~/Template.aspx" />
                <ext:ToolbarSeparator  runat="server" />
                <ext:Button  runat="server" Text="Esercenti"  />
                <ext:ToolbarSeparator  runat="server" />
                <ext:Button runat="server" Text="Ticket" HrefTarget="_self" Href="~/Registered/Ticket_List.aspx" />
                <ext:ToolbarSeparator  runat="server" />
                <ext:Button  runat="server" Text="Bacheca"  />
                <ext:ToolbarSeparator  runat="server" />
                <ext:Button  runat="server" Text="Documenti"  />
                <ext:ToolbarSeparator  runat="server" />
                <ext:Button  runat="server" Text="Faq"  />
                <ext:ToolbarSeparator  runat="server" />
                <ext:Button  runat="server" Text="Aiuto"  />
                <ext:ToolbarSeparator  runat="server" />
                <ext:Button  runat="server" Text="Statistiche"  />
                
                <ext:Button ID="Button2" runat="server" Text="Products" Visible="false">
                    <Menu>
                        <ext:Menu ID="Menu1" runat="server" ShowSeparator="false" Cls="MenuToolbar"  >
                            <Items>
                                <ext:Container ID="Container1" runat="server" Width="600" Layout="HBox">
                                    <Defaults>
                                        <ext:Parameter Name="Height" Value="230" Mode="Raw" />
                                        <ext:Parameter Name="Flex" Value="1" Mode="Raw" />
                                        <ext:Parameter Name="Cls" Value="white-menu" Mode="Value" />
                                        <ext:Parameter Name="Margin" Value="1" Mode="Raw" /> 
                                    </Defaults>
                                    <Items>
                                        <ext:MenuPanel ID="MenuPanel1" runat="server" Title="Desktop">
                                            <Menu ID="Menu2" runat="server" ShowSeparator="false">
                                                <Items>
                                                    <ext:MenuItem ID="MenuItem1" runat="server" Text="Navigation Link" />
                                                    <ext:MenuItem ID="MenuItem2" runat="server" Text="Navigation Link" />
                                                    <ext:MenuItem ID="MenuItem3" runat="server" Text="Navigation Link" />
                                                    <ext:MenuItem ID="MenuItem4" runat="server" Text="Navigation Link" />
                                                    <ext:MenuItem ID="MenuItem5" runat="server" Text="Navigation Link" />
                                                    <ext:MenuItem ID="MenuItem6" runat="server" Text="Navigation Link" />
                                                    <ext:MenuItem ID="MenuItem7" runat="server" Text="Navigation Link" />
                                                </Items>
                                            </Menu>
                                        </ext:MenuPanel>
                                                
                                        <ext:MenuPanel ID="MenuPanel2" runat="server" Title="Laptop">
                                            <Menu ID="Menu3" runat="server" ShowSeparator="false">
                                                <Items>
                                                    <ext:MenuItem ID="MenuItem8" runat="server" Text="Navigation Link" />
                                                    <ext:MenuItem ID="MenuItem9" runat="server" Text="Navigation Link" />
                                                    <ext:MenuItem ID="MenuItem10" runat="server" Text="Navigation Link" />
                                                    <ext:MenuItem ID="MenuItem11" runat="server" Text="Navigation Link" />
                                                    <ext:MenuItem ID="MenuItem12" runat="server" Text="Navigation Link" />
                                                    <ext:MenuItem ID="MenuItem13" runat="server" Text="Navigation Link" />
                                                    <ext:MenuItem ID="MenuItem14" runat="server" Text="Navigation Link" />
                                                </Items>
                                            </Menu>
                                        </ext:MenuPanel>
                                                
                                        <ext:MenuPanel ID="MenuPanel3" runat="server" Title="Accessories">
                                            <Menu ID="Menu4" runat="server" ShowSeparator="false">
                                                <Items>
                                                    <ext:MenuItem ID="MenuItem15" runat="server" Text="Navigation Link" />
                                                    <ext:MenuItem ID="MenuItem16" runat="server" Text="Navigation Link" />
                                                    <ext:MenuItem ID="MenuItem17" runat="server" Text="Navigation Link" />
                                                    <ext:MenuItem ID="MenuItem18" runat="server" Text="Navigation Link" />
                                                    <ext:MenuItem ID="MenuItem19" runat="server" Text="Navigation Link" />
                                                    <ext:MenuItem ID="MenuItem20" runat="server" Text="Navigation Link" />
                                                    <ext:MenuItem ID="MenuItem21" runat="server" Text="Navigation Link" />
                                                </Items>
                                            </Menu>
                                        </ext:MenuPanel>
                                                
                                        <ext:MenuPanel ID="MenuPanel4" runat="server" Title="Accessories">
                                            <Menu ID="Menu5" runat="server" ShowSeparator="false">
                                                <Items>
                                                    <ext:MenuItem ID="MenuItem22" runat="server" Text="Navigation Link" />
                                                    <ext:MenuItem ID="MenuItem23" runat="server" Text="Navigation Link" />
                                                    <ext:MenuItem ID="MenuItem24" runat="server" Text="Navigation Link" />
                                                    <ext:MenuItem ID="MenuItem25" runat="server" Text="Navigation Link" />
                                                    <ext:MenuItem ID="MenuItem26" runat="server" Text="Navigation Link" />
                                                    <ext:MenuItem ID="MenuItem27" runat="server" Text="Navigation Link" />
                                                    <ext:MenuItem ID="MenuItem28" runat="server" Text="Navigation Link" />
                                                </Items>
                                            </Menu>
                                        </ext:MenuPanel>
                                    </Items>
                                </ext:Container>                                    
                            </Items>
                        </ext:Menu>
                    </Menu>
                </ext:Button>
                
                <ext:Button ID="Button3" runat="server" Text="Sales Items"  Visible="false">
                    <Menu>
                        <ext:Menu ID="Menu6" runat="server" ShowSeparator="false">
                            <Items>
                                <ext:Container ID="Container2" runat="server" Width="400" Height="470" Layout="VBox">
                                    <LayoutConfig>
                                        <ext:VBoxLayoutConfig Align="Stretch" />
                                    </LayoutConfig>
                                    <Items>
                                        <ext:Container ID="Container3" runat="server" Flex="1" Layout="Hbox" Margins="0 0 5 0">
                                            <Defaults>
                                                <ext:Parameter Name="Height" Value="230" Mode="Raw" />
                                                <ext:Parameter Name="Flex" Value="1" Mode="Raw" />
                                                <ext:Parameter Name="Cls" Value="white-menu" Mode="Value" />
                                                <ext:Parameter Name="Margin" Value="1" Mode="Raw" /> 
                                            </Defaults>
                                            <Items>
                                                <ext:MenuPanel ID="MenuPanel5" runat="server" Title="Deal of the week">
                                                    <Menu ID="Menu7" runat="server" ShowSeparator="false">
                                                        <Items>
                                                            <ext:MenuItem ID="MenuItem29" runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem ID="MenuItem30" runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem ID="MenuItem31" runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem ID="MenuItem32" runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                        </Items>
                                                    </Menu>
                                                </ext:MenuPanel>
                                                        
                                                <ext:MenuPanel runat="server" Title="Clearance items">
                                                    <Menu runat="server" ShowSeparator="false">
                                                        <Items>
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                        </Items>
                                                    </Menu>
                                                </ext:MenuPanel>
                                            </Items>
                                        </ext:Container>
                                                
                                        <ext:Container runat="server" Flex="1" Layout="Hbox">
                                            <Defaults>
                                                <ext:Parameter Name="Height" Value="230" Mode="Raw" />
                                                <ext:Parameter Name="Flex" Value="1" Mode="Raw" />
                                                <ext:Parameter Name="Cls" Value="white-menu" Mode="Value" />
                                                <ext:Parameter Name="Margin" Value="1" Mode="Raw" /> 
                                            </Defaults>
                                            <Items>
                                                <ext:MenuPanel runat="server" Title="Deal of the week">
                                                    <Menu runat="server" ShowSeparator="false">
                                                        <Items>
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                        </Items>
                                                    </Menu>
                                                </ext:MenuPanel>
                                                        
                                                <ext:MenuPanel runat="server" Title="Clearance items">
                                                    <Menu runat="server" ShowSeparator="false">
                                                        <Items>
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                        </Items>
                                                    </Menu>
                                                </ext:MenuPanel>
                                                        
                                                <ext:MenuPanel runat="server" Title="Open Box Items">
                                                    <Menu runat="server" ShowSeparator="false">
                                                        <Items>
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                            <ext:MenuItem runat="server" Text="Navigation Link" />
                                                        </Items>
                                                    </Menu>
                                                </ext:MenuPanel>
                                            </Items>
                                        </ext:Container>
                                    </Items>
                                </ext:Container>
                            </Items>
                        </ext:Menu>
                    </Menu>
                </ext:Button>
                <ext:ToolbarFill />                        
                <ext:ToolbarTextItem ID="tti_UserFullName" runat="server" />
                <ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />
                <ext:Button ID="btnLogout" runat="server" Text="Logout"  >                        
                        <DirectEvents>
                            <Click OnEvent="btnLogout_Click">
                                <EventMask ShowMask="true" Msg="disconnessione in corso..." MinDelay="10"  />
                             </Click>
                        </DirectEvents>
                </ext:Button>
            </Items>
        </ext:Toolbar>
    Maybe it doesn't matter, anyway here is my master page:
    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="ExtNet_Fluid.Master.cs"
    Inherits="renosistemi.it.MasterPages.ExtNet_Fluid" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register Src="~/Controls/Header.ascx" TagName="Header" TagPrefix="uc2" %>
<%@ Register Src="~/Controls/Footer.ascx" TagName="Footer" TagPrefix="uc2" %>
<!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" />
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true">
    </asp:ScriptManager>
    <ext:Viewport runat="server" Layout="BorderLayout" StyleSpec="background-color: transparent;">
        <Items>
            <ext:Container runat="server" Layout="FitLayout"  Region="North">
                <Content>
                    <uc2:Header runat="server" />
                </Content>
            </ext:Container>
                    <ext:Container runat="server" Region="Center"  StyleSpec="background-color: transparent;" Layout="FitLayout"
                         >
                        <Content>
                            <asp:ContentPlaceHolder ID="cpContent" runat="server" />
                        </Content>
                    </ext:Container>
            <ext:Container runat="server" Layout="FitLayout"  Region="South" >
                <Content>
                    <uc2:Footer runat="server" />
                </Content>
            </ext:Container>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>
    Last edited by Daniil; Aug 13, 2013 at 3:45 AM. Reason: [CLOSED]
  2. #2
    Aug 05, 2013, 2:37 PM
    Hi Marco,

    Please clarify where do you put this user control to?
  3. #3
    Aug 05, 2013, 3:08 PM
    Hi Daniil,
    as you can see in the master page, the control is in the North region of the viewport.
    It represents the header of my web site.
    It contains the logo, split in three parts; the middle part will strecth to fill the space with Flex.
    Below, the toolbar represents the web site main menu.
    M
  4. #4
    Aug 05, 2013, 4:30 PM
    A FitLayout expects a single item. You put in the North region with FitLayout two items.

    I can recommend to put the Toolbar into the Panel's BottomBar.

    Also please note that North and South regions require Flex or Height setting.
  5. #5
    Aug 06, 2013, 7:09 AM
    Thank you Daniil, very clear!

    Below the working code.

    Just some questions:
    1) Can you suggest a better solution to tile the trhee images horizontally?
    2) Why North e South should have height or flex? this could be determinated by their elements height. (so it does for the footer now)
    3) How can I set border for the toolbar? Border="true" doesn't work
    4) Default tag doesnt work for toolbar items. Should I replicate attributes for alla the buttons (i.e. Scale=Medium).

    Thank you very much
    M

    UserControl
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Header.ascx.cs" Inherits="renosistemi.it.Controls.Header" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<ext:Panel ID="pnlHeader" runat="server" Border="false" Layout="HBoxLayout" BodyStyle="background-color: transparent;"   >
                                <LayoutConfig>
                                    <ext:HBoxLayoutConfig Align="Stretch" />
                                </LayoutConfig>                                <Items>
                                    <ext:Image  runat="server" ImageUrl="~/Images/Logo_Left.png"  Flex="1" />
                                    <ext:Image runat="server"  ImageUrl="~/Images/Logo_Center.png" Flex="2"  />
                                    <ext:Image runat="server" ImageUrl="~/Images/Logo_Right.png"   Flex="1"  />                                    
</Items>
<BottomBar >
<ext:Toolbar ID="Toolbar1" runat="server" Cls="mytoolbar"   >
            <Items>
                <ext:Button runat="server" Text="Home" HrefTarget="_self" Href="~/Default.aspx" />
                <ext:ToolbarSeparator  runat="server" />
                <ext:Button runat="server" Text="Sale" HrefTarget="_self" Href="~/Template.aspx" />
                <ext:ToolbarSeparator  runat="server" />
                <ext:Button  runat="server" Text="Esercenti"  />
                <ext:ToolbarSeparator  runat="server" />
                <ext:Button runat="server" Text="Ticket" HrefTarget="_self" Href="~/Registered/Ticket_List.aspx" />
                <ext:ToolbarSeparator  runat="server" />
                <ext:Button  runat="server" Text="Bacheca"  />
                <ext:ToolbarSeparator  runat="server" />
                <ext:Button  runat="server" Text="Documenti"  />
                <ext:ToolbarSeparator  runat="server" />
                <ext:Button  runat="server" Text="Faq"  />
                <ext:ToolbarSeparator  runat="server" />
                <ext:Button  runat="server" Text="Aiuto"  />
                <ext:ToolbarSeparator  runat="server" />
                <ext:Button  runat="server" Text="Statistiche"  />
                <ext:ToolbarFill />                        
                <ext:ToolbarTextItem ID="tti_UserFullName" runat="server" />
                <ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />
                <ext:Button ID="btnLogout" runat="server" Text="Logout"  >                        
                        <DirectEvents>
                            <Click OnEvent="btnLogout_Click">
                                <EventMask ShowMask="true" Msg="disconnessione in corso..." MinDelay="10"  />
                             </Click>
                        </DirectEvents>
                </ext:Button>
            </Items>
        </ext:Toolbar>                             

</BottomBar>
</ext:Panel>   

<%--     <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" 
         ShowStartingNode="False" />--%>
    MasterPage
    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="ExtNet_Fluid.Master.cs"
    Inherits="renosistemi.it.MasterPages.ExtNet_Fluid" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register Src="~/Controls/Header.ascx" TagName="Header" TagPrefix="uc2" %>
<%@ Register Src="~/Controls/Footer.ascx" TagName="Footer" TagPrefix="uc2" %>
<!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" />
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true">
    </asp:ScriptManager>
    <ext:Viewport runat="server" Layout="BorderLayout" StyleSpec="background-color: transparent;">
        <Items>
            <ext:Container runat="server" Layout="FitLayout"  Region="North" Height="120">
                <Content>
                    <uc2:Header runat="server" />
                </Content>
            </ext:Container>
                    <ext:Container runat="server" Region="Center"  StyleSpec="background-color: transparent;" Layout="FitLayout"
                         >
                        <Content>
                            <asp:ContentPlaceHolder ID="cpContent" runat="server" />
                        </Content>
                    </ext:Container>
            <ext:Container runat="server" Layout="FitLayout"  Region="South" >
                <Content>
                    <uc2:Footer runat="server" />
                </Content>
            </ext:Container>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>
  6. #6
    Aug 06, 2013, 8:43 AM
    Quote Originally Posted by marco.morreale View Post
    Below the working code.
    I see missed things.

    There are two user controls in the master page, but you are providing us with the one only. I guess the second one is not required at all.

    Also the master page assumes a content page.

    Also we don't have the btnLogout_Click method.

    Could you, please, provide us with a runnable and simplified sample which we can copy, paste and run without any changes?
    Forum Guidelines For Posting New Topics
    How to prepare a sample

Similar Threads

  1. [CLOSED] Portal Layout
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 26, 2013, 8:28 PM
  2. [CLOSED] Portal Layout Resize Issues
    By Patrick_G in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 18, 2013, 3:50 AM
  3. TreeGrid : Header Layout ReRender
    By itali in forum 1.x Help
    Replies: 0
    Last Post: Feb 08, 2011, 6:05 PM
  4. [CLOSED] [1.0] Portal with Layout="Table"
    By betamax in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 16, 2010, 4:02 PM
  5. [CLOSED] [1.0] Border Layout/Portal issue
    By state in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 22, 2010, 3:01 AM

Posting Permissions