Tabs are not added to tabPanel

Page 1 of 3 123 LastLast
  1. #1

    Tabs are not added to tabPanel

    hi,

    the tabs are not added to the tabpanel with the below code.
    What is missing? Pls help....


    Master Page
     <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>

    Content page
    <%@ Page Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="MasterUser.aspx.cs" Inherits="SPA_SCHEDULER.WebForm2" 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 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">
                          
                            
                    </ext:MenuItem>
               </Items>
        </Menu>
       </ext:MenuPanel>
        
        <ext:MenuPanel runat="server" Title="UserGroup" Height="250" ID="UserGroupmnPanel" Border="false"  
                SaveSelection="false"
                Collapsed="true" >
            <Menu runat="server">
                <Items>
                    <ext:MenuItem 
                            ID="mnUserGroup" 
                            runat="server" 
                            Text="User Group List"
                            Icon="Group">
                             <CustomConfig>
                                <ext:ConfigItem Name="url" Value="UsergroupList.aspx" Mode="Value" />
                            </CustomConfig>
                           
                    </ext:MenuItem>
               </Items>
        </Menu>
       </ext:MenuPanel>
       <ext:MenuPanel ID="UserMastermnPanel" runat="server" Title="User" Height="300" Border="false">
            <Menu ID="Menu1" runat="server" >
                <Items>
                    <ext:MenuItem 
                            ID="mnUserMaster" 
                            runat="server" 
                            Text="User Manager"
                            Icon="ApplicationViewColumns">
                             <CustomConfig>
                                <ext:ConfigItem Name="url" Value="UserManager.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: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:TabPanel 
                    ID="CenterTabPanel" 
                    runat="server" 
                    Margins="0 0 4 0" 
                    Border="false" EnableTabScroll="true"  Height="625" >  
        </ext:TabPanel> 
           <ext:Panel ID="PanelUser" runat="server" Height="400"  Border="false" Closable="true" CloseAction="Hide"
                 Title="User Profile" >
                    <Items>
                   
            <ext:FormPanel ID="frmUser" runat="server" Height="404"  Border="false" >
                    <Items>
                        <ext:Panel ID="Panel1" runat="server" Height="300" Padding="10" Border="false">
                            <Items>
                                <ext:Panel ID="Panel2" 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="txtFirstname" runat="server" Width="150"  ReadOnly="true"/>
                                                <ext:TextField ID="txtMiddlename" runat="server" Width="150"  ReadOnly="true"/>
                                                <ext:TextField ID="txtLastname" runat="server" Width="150"  ReadOnly="true"/>
                                            </Items>
                                        </ext:CompositeField>
                                       <ext:TextField ID="txtEmail" runat="server" FieldLabel="Email" X="0" Y="35"
                                            Width="565"  ReadOnly="true"/>
                                             <ext:RadioGroup ID="rdogrpGender" runat="server"  X="0" Y="60"
                                            FieldLabel="Gender"  ColumnsWidths="80,80" ReadOnly="true">
                                            <Items>
                                                <ext:Radio ID="rdoMale" runat="server" BoxLabel="Male" InputValue="true" >
                                                </ext:Radio>
                                                <ext:Radio ID="rdoFemale" runat="server" BoxLabel="Female" InputValue="false">
                                                </ext:Radio>
                                            </Items>
                                        </ext:RadioGroup>
                                           <ext:TextField ID="txtExp" FieldLabel="Experience(yrs)" X="310" Y="60" runat="server" Width="255"  ReadOnly="true">
                                                </ext:TextField>  
                                        <ext:DateField ID="dtDob" runat="server" FieldLabel="Date Of Birth" X="0" Y="85"
                                            Width="255"  ReadOnly="true" Format="yyyy-MM-dd" />
                                        <ext:DateField ID="dtDoj" runat="server"  X="310" Y="85"  Width="255" 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="txtAddress" runat="server" FieldLabel="Address" Width="250"  ReadOnly="true">
                                                </ext:TextArea>
                                                <ext:ComboBox ID="cmbCity" FieldLabel="City" runat="server" Width="250" EmptyText="Select City"
                                        StoreID="CityStore" DisplayField="CityName" ValueField="CityId"
                                        AllowBlank="false" BlankText="Please select city"
                                           MsgTarget="Side" ReadOnly="true">
                                        </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="txtResidence" runat="server" FieldLabel="Residence" X="-10" Width="250"
                                                     ReadOnly="true"/>
                                                <ext:TextField ID="txtMobile" runat="server" FieldLabel="Mobile" X="-10" Width="250"
                                                     ReadOnly="true"/>
                                            </Items>
                                        </ext:FieldSet>        
                                    </Items>
                                </ext:Panel>
                            </Items>
                        </ext:Panel>
                         
                    </Items>
                    
                   
                </ext:FormPanel>
                  </Items>
                </ext:Panel>  
    </asp:Content>
    Last edited by Vaishali; Feb 18, 2012 at 4:44 AM.
  2. #2
    Hi
    Are You talking about the tab panel in content page?
    <ext:TabPanel
    ID="CenterTabPanel"
    runat="server"
    Margins="0 0 4 0"
    Border="false" EnableTabScroll="true" Height="625" >
    </ext:TabPanel>
  3. #3
    Yes, I am talking about that only

    If I am using these code in a simple aspx page then it works..
    But if I m using Master-content pages than its not working...
    Last edited by Vaishali; Feb 18, 2012 at 10:29 AM.
  4. #4
    hi,
    I tried your example and you just need to place your PanelUser inside the tabpanel
    <ext:tabpanel runat="server">
    <items>
    you have to place your panel here..try placing your PanelUser panel here..it will work
    </items>
    </ext:tabpanel
  5. #5
    I know that If I do that it will work.
    But I dont want that, I want that when I click on any of the menuPanel items that respective UsergroupList.aspx, UserManager.aspx, UserProfile.aspx pages should open and add to the tabPanel. Dont assume PanelUser, I have taken it to add at run time.





    Vaishali Khatri
    Kintu Designs PVT LTD.
  6. #6
    Hi vaishali

    I worked out with your problem,U can do it some thing like below

    u need to add a listner on every menu item click

    <ext:MenuItem ID="MenuItem2" runat="server" Text="User Profile" Icon="ApplicationForm">
                                <CustomConfig>
                                    <ext:ConfigItem Name="url" Value="Default2.aspx" Mode="Value" />
                                </CustomConfig>
                                <Listeners>
                                <Click Handler="addTab(#{CenterTabPanel}, 'idGgl', this.url);" />
                                </Listeners>
                            </ext:MenuItem>
    and add this java script

    var addTab = function (tabPanel, id, url) {
    var tab = tabPanel.getComponent(id);

    if (!tab) {
                    tab = tabPanel.add({ 
                        id       : id, 
                        title    : url, 
                        closable : true,                    
                        autoLoad : {
                            showMask : true,
                            url      : url,
                            mode     : "iframe",
                            maskMsg  : "Loading " + url + "..."
                        }                    
                    });
    
                    tab.on("activate", function () {
                        var item = MenuPanel1.menu.items.get(id + "_item");
                        
                        if (item) {
                            MenuPanel1.setSelection(item);
                        }
                    }, this);
                }
                
                tabPanel.setActiveTab(tab);
            }

    And yeah most important thing
    what ever page you want to open in the tab panel
    just keep in mind that you should not keep that page under master page or else it will load the whle master page content within it
    Last edited by geoffrey.mcgill; Feb 20, 2012 at 5:08 AM. Reason: please use [CODE] tags
  7. #7
    Hi Hardik,

    I have already tried this javascript..
    Here there is one problem.
    The problem is when I close the tab the tab is closes well, but the content remain when I alternatively click on any menu panel i.e
    When I alternatively click on any of the menu panel all tabs add but when I close the tab the tab close.
    When I close last tab which remains, the tab close but its contents remains
    So I added two lines and it runs well now.

      <script>
     var addTab = function (tabPanel, id, url,title) {
               var tabTitle =title;
               var tab = tabPanel.getComponent(id);
           
                if (!tab) {
                    tab = tabPanel.add({ 
                        id       : id, 
                      
                        title    : tabTitle, 
                        closable : true, 
                        hideMode : "offsets",    
                        border   :  false,           
                        autoLoad : {
                            showMask : true,
                           
                            url      : url,
                            mode     : "iframe",      
                            maskMsg  : "Loading " + tabTitle + "..."     
                        }
                                
                    });
                      tab.on('beforeclose',function(){
                        this.removeAll();
                    });
                    tab.on("activate", function () {
                        var item = UserMastermnPanel.menu.items.get(id + "_item");
                        
                        if (item) {
                            UserMastermnPanel.setSelection(item);
                        }
                    }, this);
                }
                
                tabPanel.setActiveTab(tab);
            }
        </script>
    I added below lines to the javascript and now its runs well

       tab.on('beforeclose',function(){
                        this.removeAll();
                    });

    But I want to know what is missing in the previous example?
    And thanks for the help...



    Vaishali Khatri
    Kintu Design PVT LTD.
    Last edited by Vaishali; Feb 20, 2012 at 5:40 AM.
  8. #8
    Hi vaishali
    The problem in your script was with

    var tp = Ext.getCmp('CenterTabPanel');

    it was returning undefined value

    because CenterTabPanel is in content panel..so in order to get the component u should do
    var tp = Ext.getCmp('ctl_cntCenter_CenterTabPanel');
    and then it will work

    And yeah we are software engineers,So its ok no need of thanx and all
    and also i have sent u the frnd request on ext.net....
  9. #9
    I have added this line
    still not working...
  10. #10
    Hi vaishali

    you need to do like below

    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,tabpanel) {
    alert(config.url);
    if (Ext.isEmpty(config.url, false)) {
    return;
    }

    var tp = Ext.getCmp(tabpanel.id);
    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();
    }
    }
    };



    and



    <ext:MenuPanel ID="UserMastermnPanel" runat="server" Title="User" Height="300" Border="false">
    <Menu ID="Menu2mmm" runat="server">
    <Items>
    <ext:MenuItem ID="mnUserMaster" runat="server" Text="User Manager" Icon="ApplicationViewColumns">
    <CustomConfig>
    <ext:ConfigItem Name="url" Value="UserManager.aspx" Mode="Value" />
    </CustomConfig>
    </ext:MenuItem>
    <ext:MenuItem ID="MenuItem2" runat="server" Text="User Profile" Icon="ApplicationForm">
    <CustomConfig>
    <ext:ConfigItem Name="url" Value="Default2.aspx" Mode="Value" />
    </CustomConfig>

    </ext:MenuItem>
    </Items>
    <Listeners>
    <ItemClick Handler="Northwind.addTab({ title : menuItem.text, url : menuItem.url, icon : menuItem.iconCls },#{CenterTabPanel});" />
    </Listeners>

    </Menu>
    </ext:MenuPanel>


    now it will work
Page 1 of 3 123 LastLast

Similar Threads

  1. Add tabs to the tabpanel
    By Vaishali in forum 1.x Help
    Replies: 1
    Last Post: Oct 04, 2012, 11:23 AM
  2. Replies: 4
    Last Post: Jul 01, 2010, 1:49 AM
  3. 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

Posting Permissions