Add tabs to the tabpanel

  1. #1

    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
             }
            }
        </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>
  2. #2

    Hi

    Hi Vaishali, below link will help you.
    http://examples2.ext.net/#/TabPanel/Basic/Add_Tabs/

Similar Threads

  1. How to close all tabs in TabPanel
    By ozayExt in forum 1.x Help
    Replies: 3
    Last Post: Apr 27, 2012, 11:48 AM
  2. Tabs are not added to tabPanel
    By Vaishali in forum 1.x Help
    Replies: 26
    Last Post: Feb 21, 2012, 8:13 AM
  3. icon on tabs in tabpanel
    By silverstarsky in forum 1.x Help
    Replies: 2
    Last Post: Nov 20, 2009, 5:11 AM
  4. Hi, Why the TabPanel cannot update 2 tabs?
    By bruce in forum 1.x Help
    Replies: 2
    Last Post: Apr 20, 2009, 10:25 PM
  5. Cascade tabs over 2 lines in TabPanel
    By jsemple in forum Feature Requests
    Replies: 3
    Last Post: Feb 27, 2009, 11:55 AM

Posting Permissions