Feb 17, 2012, 10:24 AM
Add tabs to the tabpanel
Hi,
Below is my code..
My problem is that when I click on menu items the tabs are not added.
How can I add the tabs to the tabPanel?
MaterPage
ContentPage
Below is my code..
My problem is that when I click on menu items the tabs are not added.
How can I add the tabs to the tabPanel?
MaterPage
}
}
</script>
<title>Untitled Page</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:Viewport ID="Viewport1" runat="server" Layout="border">
<Items>
<ext:Panel ID="Panel1" runat="server" Height="29" Region="North"
Split="True" Layout="FitLayout">
<Items>
<ext:Toolbar ID="tbHeader" runat="server" Cls="mytoolbar">
<Items>
<ext:Label ID="lblTitle" runat="server"/>
<ext:ToolbarFill ID="fill1" runat="server" />
<ext:Button ID="btnName" runat="server" Icon="StatusOnline" AutoDataBind="true">
<Menu>
<ext:Menu ID="menu1" runat="server">
<Items>
<ext:MenuItem ID="menuProfile" Text="Edit Profile" Icon="Magnifier">
<DirectEvents>
<Click OnEvent="EditProfile"></Click>
</DirectEvents>
</ext:MenuItem>
<ext:MenuItem ID="menuPassword" Text="Change Password" Icon="LockEdit" >
<DirectEvents>
<Click OnEvent="Change"></Click>
</DirectEvents>
</ext:MenuItem>
<ext:MenuItem ID="menuOptions" Text="Options" Icon="Wrench">
<Menu>
<ext:Menu ID="menu3" runat="server">
<Items>
<ext:MenuItem ID="menuTheme" Text="Choose a Theme...">
<Menu>
<ext:Menu ID="menu4" runat="server">
<Items>
<ext:MenuItem ID="menuDefault" Text="Default">
<Listeners>
<Click Handler="Coolite.Ext.setTheme('/extjs/resources/css/ext-all-embedded-css/coolite.axd');" />
</Listeners>
</ext:MenuItem>
<ext:MenuItem ID="menuGray" Text="Gray">
<Listeners>
<Click Handler="Coolite.Ext.setTheme('/extjs/resources/css/xtheme-gray-embedded-css/coolite.axd');" />
</Listeners>
</ext:MenuItem>
<ext:MenuItem ID="menuSlate" Text="Slate">
<Listeners>
<Click Handler="Coolite.Ext.setTheme('/extjs/resources/css/xtheme-slate-embedded-css/coolite.axd');" />
</Listeners>
</ext:MenuItem>
</Items>
</ext:Menu>
</Menu>
</ext:MenuItem>
</Items>
</ext:Menu>
</Menu>
</ext:MenuItem>
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />
<ext:Button ID="btnLogout" runat="server" Icon="LockGo" Text="Logout" Cls="my-color">
<DirectEvents>
<Click OnEvent="LogOutButton_Click" ></Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</Items>
</ext:Panel>
<%-- <ext:Panel ID="Panel2" runat="server" Collapsible="true" Layout="Fit" Region="East"
Split="true" Title="East" Width="175" Margins="0 4 4 0" CollapseMode="Mini">
<Items>
<ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0" Border="false" TabPosition="Bottom"
Title="Title">
<Items>
<ext:Panel ID="Panel3" runat="server" Title="Tab 1">
<Items>
</Items>
</ext:Panel>
<ext:Panel ID="Panel4" runat="server" Title="Tab 2">
<Items>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Panel>--%>
<%-- <ext:Panel ID="Panel5" runat="server" Collapsible="true" Height="100" Region="South"
Split="true" Title="South">
<Items>
</Items>
</ext:Panel>--%>
<ext:Panel ID="Panel6"
runat="server"
Title="Management"
Region="West"
Width="225"
CollapseMode="Mini"
Margins="0 0 4 4">
<Content>
<asp:ContentPlaceHolder ID="cntWest" runat="server">
</asp:ContentPlaceHolder>
</Content>
</ext:Panel>
<ext:Panel ID="Panel2"
runat="server"
Region="Center"
Margins="0 0 4 0" Closable="true" CloseAction="Close">
<Content>
<asp:ContentPlaceHolder ID="cntCenter" runat="server">
</asp:ContentPlaceHolder>
</Content>
</ext:Panel>
</Items>
</ext:Viewport>
<div>
<ext:Store ID="CityStore" runat="server" >
<Reader>
<ext:JsonReader IDProperty="CityId">
<Fields>
<ext:RecordField Name="CityId"></ext:RecordField>
<ext:RecordField Name="CityName"/>
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Window ID="WinUserEdit" runat="server" Height="382" Icon="ApplicationEdit"
Title="Edit User Profile" Width="624" Resizable="false" Hidden="true">
<Items>
<%--// <ext:Panel ID="PanelUserEdit" runat="server" Height="350" Border="true" Width="610">
/ <Items>
--%>
<ext:FormPanel ID="frmUserEdit" runat="server" Height="414" Border="false" >
<Items>
<ext:Panel ID="Panel3" runat="server" Height="300" Padding="10" Border="false">
<Items>
<ext:Panel ID="Panel4" runat="server" Height="280" Padding="15" Border="false" Layout="AbsoluteLayout">
<Items>
<ext:CompositeField ID="CompositeField1" runat="server" FieldLabel="Full name" X="0"
Y="10">
<Items>
<ext:TextField ID="txtUFirstname" runat="server" Width="150" AllowBlank="false" BlankText="Enter FirstName"
MsgTarget="Side"/>
<ext:TextField ID="txtUMiddlename" runat="server" Width="150"
MsgTarget="Side"/>
<ext:TextField ID="txtULastname" runat="server" Width="150" AllowBlank="false" BlankText="Enter LastName"
MsgTarget="Side"/>
</Items>
</ext:CompositeField>
<ext:TextField ID="txtUEmail" runat="server" FieldLabel="Email" X="0" Y="35"
Width="565" AllowBlank="false" BlankText="Enter Email"/>
<ext:RadioGroup ID="rdogrpUGender" runat="server" X="0" Y="60"
FieldLabel="Gender" ColumnsWidths="80,80" >
<Items>
<ext:Radio ID="rdoUMale" runat="server" BoxLabel="Male" InputValue="true" >
</ext:Radio>
<ext:Radio ID="rdoUFemale" runat="server" BoxLabel="Female" InputValue="false">
</ext:Radio>
</Items>
</ext:RadioGroup>
<ext:TextField ID="txtUExp" FieldLabel="Experience(yrs)" X="310" Y="60"
AllowBlank="false" BlankText="Enter Experience" runat="server" Width="255" >
</ext:TextField>
<ext:DateField ID="dtUDob" runat="server" FieldLabel="Date Of Birth" X="0" Y="85"
Width="255" Format="yyyy-MM-dd" AllowBlank="false" BlankText="Enter Date of Birth"/>
<ext:DateField ID="dtUDoj" runat="server" X="310" Y="85" Width="255"
AllowBlank="false" BlankText="Enter Date of joining"
FieldLabel="Date Of Joining"
Format="yyyy-MM-dd" ReadOnly="true">
</ext:DateField>
<ext:FieldSet ID="FieldSet3" runat="server" Title="Address" X="-8" Y="120" Width="400"
BodyBorder="false" Padding="5">
<Items>
<ext:TextArea ID="txtUAddress" runat="server" FieldLabel="Address" Width="250" AllowBlank="false" BlankText="Enter Address"
MsgTarget="Side">
</ext:TextArea>
<ext:ComboBox ID="cmbUCity" FieldLabel="City" runat="server" Width="250" EmptyText="Select City"
StoreID="CityStore" DisplayField="CityName" ValueField="CityId"
AllowBlank="false" BlankText="Please select city"
MsgTarget="Side" >
</ext:ComboBox>
</Items>
</ext:FieldSet>
<ext:FieldSet ID="FieldSet1" runat="server" Title="Primary Contacts" X="302" Y="120"
Width="400" BodyBorder="false" Padding="5">
<Items>
<ext:TextField ID="txtUResidence" runat="server" MaskRe="[0-9-]"
Truncate="false" FieldLabel="Residence" X="-10" Width="250"
AllowBlank="false" BlankText="Enter contact no."
MsgTarget="Side"/>
<ext:TextField ID="txtUMobile" MaskRe="[0-9]" MaxLength="10"
Truncate="false" runat="server" FieldLabel="Mobile" X="-10"
Width="240" AllowBlank="false" BlankText="Enter Mobile no."
MsgTarget="Side"/>
</Items>
</ext:FieldSet>
<ext:TextField ID="txtUUsername" runat="server" Width="150" Y="145" AllowBlank="false" BlankText="Enter FirstName"
MsgTarget="Side" Hidden="true"/>
<ext:TextField ID="txtUPassword" runat="server" Width="150" Y="170" AllowBlank="false" BlankText="Enter FirstName"
MsgTarget="Side" Hidden="true"/>
<ext:TextField ID="txtUGroup" runat="server" Width="150" Y="195" AllowBlank="false" BlankText="Enter FirstName"
MsgTarget="Side" Hidden="true"/>
<ext:TextField ID="txtUIsdeleted" runat="server" Width="150" Y="210" AllowBlank="false" BlankText="Enter FirstName"
MsgTarget="Side" Hidden="true"/>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Label ID="lblMessage" runat="server">
</ext:Label>
<ext:ToolbarFill runat="server" Width="100"></ext:ToolbarFill>
<ext:Button ID="btnUpdate" runat="server" Icon="Disk" Text="Update" >
<DirectEvents>
<Click OnEvent="Update">
<Confirmation ConfirmRequest="true" Title="Confirm" Message="Are you sure you want to modify the information?"/>
<EventMask ShowMask="true" Msg="Updating record..." MinDelay="10" />
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:FormPanel>
<%-- </Items>
</ext:Panel> --%>
</Items>
</ext:Window>
</div>
<ext:Window ID="winChangePassword" runat="server" AutoHeight="true" Draggable="false"
Hidden="true" Icon="LockEdit" MaxWidth="350" Title="Change Password" InitCenter="true"
Width="350" X="300" Y="175">
<Items>
<ext:FormPanel ID="FormPanel1" runat="server" Title="" Padding="5" ButtonAlign="Center">
<Items>
<ext:TextField ID="txtUserName" runat="server" FieldLabel="User Name"
MsgTarget="Side" AllowBlank="false" BlankText="Required field"
LabelAlign="Right" FieldClass="TextBox" />
<ext:TextField ID="txtOldPassword" InputType="Password" runat="server"
IsRemoteValidation="true" FieldLabel="Old Password" LabelAlign="Right"
FieldClass="TextBox" MsgTarget="Side" AllowBlank="false" BlankText="Required field">
<RemoteValidation OnValidation="CheckOldPassword"></RemoteValidation>
</ext:TextField>
<ext:TextField
ID="txtNewPassword"
LabelAlign="Right"
runat="server" FieldClass="TextBox"
FieldLabel="New Password"
InputType="Password"
MsgTarget="Side" AllowBlank="false" BlankText="Required field">
</ext:TextField>
<ext:TextField ID="txtCNewPassword" LabelAlign="Right"
runat="server" FieldClass="TextBox"
Vtype="password"
FieldLabel="Confirm Password"
InputType="Password"
MsgTarget="Side" AllowBlank="false" BlankText="Required field"
IsRemoteValidation="true">
<RemoteValidation OnValidation="CheckNewPassword"></RemoteValidation>
<%-- <CustomConfig>
<ext:ConfigItem Name="initialPassField" Value="#{txtNewPassword}" Mode="Value" />
</CustomConfig> --%>
</ext:TextField>
</Items>
<Buttons>
<ext:Button ID="btnSave" runat="server" Text="Save" Icon="Disk">
<DirectEvents>
<Click OnEvent="SavePassword">
<EventMask ShowMask="true" Msg="Saving Password..." MinDelay="500" />
</Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="btnCancel" runat="server" Text="Cancel" Icon="Cancel">
<Listeners>
<Click Handler="Cancel" />
</Listeners>
</ext:Button>
</Buttons>
</ext:FormPanel>
</Items>
</ext:Window>
</form>
</body>
</html>ContentPage
<%@ Page Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm10.aspx.cs" Inherits="SPA_SCHEDULER.WebForm10" Title="Untitled Page" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
Northwind = {
hashCode: function(str) {
var hash = 1315423911;
for (var i = 0; i < str.length; i++) {
hash ^= ((hash << 5) + str.charCodeAt(i) + (hash >> 2));
}
return (hash & 0x7FFFFFFF);
},
addTab: function(config) {
alert(config.url);
if (Ext.isEmpty(config.url, false)) {
return;
}
var tp = Ext.getCmp('CenterTabPanel');
var id = this.hashCode(config.url);
var tab = tp.getComponent(id);
if (!tab) {
tab = tp.addTab({
id: id.toString(),
title: config.title,
iconCls: config.icon || 'icon-applicationdouble',
closable: true,
autoLoad: {
showMask: true,
url: config.url,
mode: 'iframe',
noCache: true,
maskMsg: "Loading '" + config.title + "'...",
scripts: true,
passParentSize: config.passParentSize
}
});
} else {
tp.setActiveTab(tab);
Ext.get(tab.tabEl).frame();
}
}
};
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cntWest" runat="server">
<ext:AccordionLayout ID="AccordionLayout1" runat="server" Animate="true">
<Items>
<ext:MenuPanel runat="server" Title="User" Height="250" ID="UserPanel" Border="false"
SaveSelection="false"
Collapsed="true" >
<Menu ID="Menu2" runat="server">
<Items>
<ext:MenuItem
ID="mnuser"
runat="server"
Text="User Profile"
Icon="Group">
<Listeners>
<Click Handler="#{CenterTabPanel}.addTab(#{PanelUser});" />
</Listeners>
</ext:MenuItem>
</Items>
</Menu>
</ext:MenuPanel>
<ext:MenuPanel runat="server" Title="UserGroup" Height="250" ID="UserGroupmnPanel" Border="false"
SaveSelection="false"
Collapsed="true" >
<Menu ID="Menu1" runat="server">
<Items>
<ext:MenuItem
ID="mnUserGroup"
runat="server"
Text="User Group List"
Icon="Group">
<CustomConfig>
<ext:ConfigItem Name="url" Value="UserManager.aspx" Mode="Value" />
</CustomConfig>
</ext:MenuItem>
</Items>
</Menu>
</ext:MenuPanel>
<ext:MenuPanel ID="UserMastermnPanel" runat="server" Title="User" Height="300" Border="false">
<Menu ID="Menu3" runat="server" >
<Items>
<ext:MenuItem
ID="mnUserMaster"
runat="server"
Text="User Manager"
Icon="ApplicationViewColumns">
<CustomConfig>
<ext:ConfigItem Name="url" Value="UsergroupList.aspx" Mode="Value" />
</CustomConfig>
</ext:MenuItem>
<ext:MenuItem
ID="MenuItem2"
runat="server"
Text="User Profile"
Icon="ApplicationForm">
<CustomConfig>
<ext:ConfigItem Name="url" Value="UserProfile.aspx" Mode="Value" />
</CustomConfig>
</ext:MenuItem>
</Items>
<Listeners>
<ItemClick Handler="Northwind.addTab({ title : menuItem.text, url : menuItem.url, icon : menuItem.iconCls });" />
</Listeners>
</Menu>
</ext:MenuPanel>
</Items>
</ext:AccordionLayout>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cntCenter" runat="server">
<ext:TabPanel
ID="CenterTabPanel"
runat="server"
Margins="0 0 4 0"
Border="false" EnableTabScroll="true" Height="625" >
</ext:TabPanel>
</asp:Content>
