PDA

View Full Version : [CLOSED] Portal header layout



marco.morreale
Aug 05, 2013, 2:47 PM
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>

Daniil
Aug 05, 2013, 3:37 PM
Hi Marco,

Please clarify where do you put this user control to?

marco.morreale
Aug 05, 2013, 4: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

Daniil
Aug 05, 2013, 5: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.

marco.morreale
Aug 06, 2013, 8: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>

Daniil
Aug 06, 2013, 9:43 AM
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 (http://forums.ext.net/showthread.php?3440)
How to prepare a sample (http://forums.ext.net/showthread.php?13672&p=56687&viewfull=1#post56687)