Aug 17, 2013, 10:54 AM
[CLOSED] Help required - Add Tab and Close Tab design architecture
Please go through the pages MasterPage, Home.aspx, HIRAs.aspx
MasterPage
------------------
--------------
Home.aspx (this is not inherited from MasterPage)
____________________
---------------------
HIRAs.aspx (this is inherited from master page)
-------------------------------
By clicking on the
HIRAs page will have Open and Close buttons.
Is it possible to open a new tab bycalling "addTab(#{tabPanelContentPlaceHolder}" handler.
Is it possible to close the HIRAs tab by invoking either a server side or client side script.
Please let me know your thoughts.
Regards
Mohan
MasterPage
------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="mainResourceManager" runat="server" ClientIDMode="Static">
</ext:ResourceManager>
<asp:ContentPlaceHolder ID="mainContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>--------------
Home.aspx (this is not inherited from MasterPage)
____________________
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="xxxx.xxxx.Home" %>
<html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server">
<title>WorkSafe</title>
<style>
.icon-combo-item {
background-repeat: no-repeat !important;
background-position: 3px 50% !important;
padding-left: 24px !important;
}
.mytoolbar {
border: 10px !important;
background: #696969;
color: #ff0000;
}
.my-menuitem span {
/*font-weight: bold;*/
border: 10px !important;
background: #696969;
color: #ff0000;
}
.my-item {
/*font-weight: bold;*/
border: 10px !important;
background: #4169E1;
color: #4169E1;
}
</style>
<script type="text/javascript">
var addTab = function (tabPanel, id, name, url, menuItem) { }
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="resourceManager" runat="server" ClientIDMode="Static">
</ext:ResourceManager>
<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout" IDMode="Explicit" IsDynamic="False" Namespace="App" RenderXType="True">
<Items>
<ext:Panel ID="Panel1" runat="server" Region="North" Split="true" Height="90" Collapsible="false" meta:resourcekey="Panel1Resource2">
<Content>
<table style="width: 100%; height: 100%;">
<tr>
<td style="width: 75%; height: 100%;">
<img src="Images/logobar_left.png" />
</td>
<td style="width: 75%; height: 100%;">
<img src="Images/logobar_right.png" />
</td>
</tr>
</table>
</Content>
</ext:Panel>
<ext:TabPanel runat="server" Title="Navigation" Region="West" Layout="FitLayout" ID="navigationTabPanel" ClientIDMode="Static"
Width="225" MinWidth="225" MaxWidth="400" Split="true" Collapsible="true" TabPosition="Bottom" meta:resourcekey="navigationTabPanelResource1">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server" Layout="FitLayout" Border="true" Cls="mytoolbar">
<Items>
<ext:ComboBox ID="ComboBox1" runat="server" Width="200" Editable="false" DisplayField="name" AutoPostBack="true"
ValueField="code" QueryMode="Local" TriggerAction="All" EmptyText="Select Language" meta:resourcekey="ComboBox1Resource1">
<Store>
<ext:Store ID="Store1" runat="server" meta:resourcekey="Store1Resource1">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="iconCls" />
<ext:ModelField Name="code" />
<ext:ModelField Name="name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ListConfig>
<ItemTpl ID="ItemTpl1" runat="server">
<Html>
<div class="icon-combo-item {iconCls}">{name}</div>
</Html>
</ItemTpl>
</ListConfig>
<Listeners>
<Change Handler="if(this.valueModels.length>0){this.setIconCls(this.valueModels[0].get('iconCls'));}" />
</Listeners>
<DirectEvents>
</DirectEvents>
</ext:ComboBox>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Panel ID="hiraPanel" runat="server" Title="HIRA" meta:resourcekey="hiraPanelResource1">
<Items>
<ext:MenuPanel ID="hiraMenuPanel" runat="server" Title="" meta:resourcekey="hiraMenuPanelResource1">
<Menu runat="server" ID="hiraMenu">
<Items>
<ext:MenuItem runat="server" Text="Ext.NET">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, 'idClt', '../HIRA/HIRAs.aspx', this);" />
</Listeners>
</ext:MenuItem> </Items>
</Menu>
</ext:MenuPanel>
</Items>
</ext:Panel>
<ext:Panel ID="rdraPanel" runat="server" Title="RDRA" meta:resourcekey="rdraPanelResource1">
<Items>
<ext:MenuPanel ID="rdraMenuPanel" runat="server" Title="" meta:resourcekey="rdraMenuPanelResource1">
<Menu runat="server" ID="rdraMenu">
</Menu>
</ext:MenuPanel>
</Items>
</ext:Panel>
<ext:Panel ID="ptwPanel" runat="server" Title="PTW" meta:resourcekey="ptwPanelResource1">
<Items>
<ext:MenuPanel ID="ptwMenuPanel" runat="server" Title="" meta:resourcekey="ptwMenuPanelResource1">
<Menu runat="server" ID="ptwMenu">
</Menu>
</ext:MenuPanel>
</Items>
</ext:Panel>
<ext:Panel ID="lotoPanel" runat="server" Title="LOTO" meta:resourcekey="lotoPanelResource1">
<Items>
<ext:MenuPanel ID="lotoMenuPanel" runat="server" Title="" meta:resourcekey="lotoMenuPanelResource1">
<Menu runat="server" ID="lotoMenu">
</Menu>
</ext:MenuPanel>
</Items>
</ext:Panel>
<ext:Panel ID="adminPanel" runat="server" Title="ADMIN" meta:resourcekey="adminPanelResource1" Layout="AccordionLayout">
<Items>
<ext:MenuPanel ID="adminGeneralMenuPanel" runat="server" Title="" meta:resourcekey="adminGeneralMenuPanelResource1">
<Menu runat="server" ID="adminGeneralMenu">
</Menu>
</ext:MenuPanel>
<ext:MenuPanel ID="users_rolesAdminMenuPanel" runat="server" Title="" meta:resourcekey="users_rolesAdminMenuPanelResource1">
<Menu runat="server" ID="users_rolesAdminMenu">
</Menu>
</ext:MenuPanel>
<ext:MenuPanel ID="locationhierarchyAdminMenuPanel" runat="server" Title="" meta:resourcekey="locationhierarchyAdminMenuPanelResource1">
<Menu runat="server" ID="locationhierarchyAdminMenu">
</Menu>
</ext:MenuPanel>
<ext:MenuPanel ID="hiraAdminMenuPanel" runat="server" Title="" meta:resourcekey="hiraAdminMenuPanelResource1">
<Menu runat="server" ID="hiraAdminMenu">
</Menu>
</ext:MenuPanel>
<ext:MenuPanel ID="lessonsAdminMenuPanel" runat="server" Title="" meta:resourcekey="lessonsAdminMenuPanelResouce1">
<Menu runat="server" ID="lessonsAdminMenu">
</Menu>
</ext:MenuPanel>
<ext:MenuPanel ID="lotoAdminMenuPanel" runat="server" Title="" meta:resourcekey="lotoAdminMenuPanelResource1">
<Menu runat="server" ID="lotoAdminMenu">
</Menu>
</ext:MenuPanel>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
<ext:TabPanel ID="tabPanelContentPlaceHolder" runat="server" Region="Center" meta:resourcekey="TabPanel1Resource2" ClientIDMode="Static">
<Items>
<ext:Panel runat="server" Title="Home" ID="panelHome" meta:resourcekey="panelHomeResource2">
<Items></Items>
</ext:Panel>
<ext:Panel runat="server" Title="Graphical Planner" ID="panel3" meta:resourcekey="panel3Resource2">
<Items></Items>
</ext:Panel>
<ext:Panel runat="server" Title="Conflict Manager" ID="panel4" meta:resourcekey="panel4Resource2">
<Loader ID="Loader1" Url="~/ConflictManager/ConflictManager.aspx" runat="server" Mode="Frame">
<LoadMask ShowMask="true" />
</Loader>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>---------------------
HIRAs.aspx (this is inherited from master page)
<%@ Page Title="" Language="C#" MasterPageFile="~/xxx.Master" AutoEventWireup="true" CodeBehind="HIRAs.aspx.cs" Inherits="xxxx.xxxx.HIRA.HIRAs" %>
<%@ Register Src="~/UserControls/ModifiedEdit.ascx" TagName="ModifiedEdit" TagPrefix="UsrCtrl1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="mainContentPlaceHolder" runat="server">
<script type="text/javascript">
function validate(leftFormPanel, gpFacilites) {
var valid = leftFormPanel.getForm().isValid();
if (!gpFacilites.hasSelection()) {
Ext.Msg.show({ icon: Ext.MessageBox.ERROR, msg: 'You must choose a facility', buttons: Ext.Msg.OK });
}
return valid && gpFacilites.hasSelection();
}
</script>
<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
<Items>
<ext:FormPanel ID="rightFormPanel" runat="server" Region="Center" Title="Add User" ButtonAlign="Left"
AutoScroll="true" Width="800" MaxWidth="800" AnchorHorizontal="100%" Split="true">
<Items>
</Items>
<Buttons>
<ext:ImageButton ID="imgBtnOpen" runat="server" Width="32" Height="32" Border="true" StandOut="true" Hidden="true">
<DirectEvents>
</DirectEvents>
</ext:ImageButton>
<ext:ImageButton ID="imgBtnClose" runat="server" Width="32" Height="32" Border="true" StandOut="true" Hidden="true">
<DirectEvents
</DirectEvents>
</ext:ImageButton>
</Button>
<ext:FormPanel
</Items>
</ext:Viewport>-------------------------------
By clicking on the
<ext:MenuItem runat="server" Text="HIRAs">
<Listeners>
<Click Handler="addTab(#{tabPanelContentPlaceHolder}, 'idClt', '../HIRA/HIRAs.aspx', this);" />
</Listeners>
</ext:MenuItem>HIRAs page will have Open and Close buttons.
Is it possible to open a new tab bycalling "addTab(#{tabPanelContentPlaceHolder}" handler.
Is it possible to close the HIRAs tab by invoking either a server side or client side script.
Please let me know your thoughts.
Regards
Mohan
Last edited by Baidaly; Aug 20, 2013 at 3:56 AM.
Reason: [CLOSED]
Originally Posted by mohan.bizbites
