What's New?

How to display / hide 'close' button on Tab

Page 1 of 2 12 LastLast
  1. #1
    Dec 14, 2011, 2:35 AM

    How to display / hide 'close' button on Tab

    Hi all,

    Could you please suggest me how to display/hide 'close' button on Tab (near tab title).

    I have a TabPanel1, Tab2 on TabPanel1 can be close. but when user open form in Tab2.
    I want to hide 'close' button on Tab2 and then when user close form in Tab2 the 'close' button
    on Tab2 will display agian.

    Tab 2 open with below command

    var addTab=function(tabPanel, id, tabtitle, url) {
  var tab=tabPanel.getComponent(id);
  if(!tab){
     tab=tabPanel.add({
       id: id,
       title: tabtitle,
       closable: true,
       autoLoad: {
         showmask: true,
         url: url;
         mode: "iframe",
         maskMsg: "Loading "+tabtitle+"..."
       }
  });
}
tabPanel.setActiveTab(tab);
}
    Thank you.
  2. #2
    Dec 15, 2011, 3:35 PM
    Hi,

    Please look at the example.

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!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 runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:TabPanel runat="server">
            <Items>
                <ext:Panel 
                    ID="Panel1" 
                    runat="server" 
                    Title="Tab" 
                    Closable="true" />
            </Items>
        </ext:TabPanel>
        <ext:Button runat="server" Text="Hide">
            <Listeners>
                <Click Handler="Ext.fly(Panel1.tabEl).child('.x-tab-strip-close').hide();" />
            </Listeners>
        </ext:Button>
        <ext:Button runat="server" Text="Show">
            <Listeners>
                <Click Handler="Ext.fly(Panel1.tabEl).child('.x-tab-strip-close').show();" />
            </Listeners>
        </ext:Button>
    </form>
</body>
</html>
  3. #3
    Dec 16, 2011, 12:38 AM

    Thank you sir,

    I test you code its work fine.

    but when I adapted code with my project.

    I changed "Ext.fly(Panel1.tabEl)..." to "Ext.fly(idEmployees.tabEl)..."

    an error happen. "idEmployees" is undefined"

    I tried "TabPanel1__idEmployees" is not work too.

    I open new tab with command 

    <Click Handler="addTab(#{TabPanel1},'idEmployees','Employees','accessgrid.aspx')" />
    and command "Ext.fly(idEmployees.tabEl)..." is in file accessgrid.aspx

    How to refer "ID" of new tab element.
    Last edited by Aod47; Dec 16, 2011 at 1:17 PM.
  4. #4
    Dec 16, 2011, 9:47 AM
    Please try
    Ext.getCmp('idEmpoyees')
    instead of
    idEmpoyees
  5. #5
    Dec 16, 2011, 1:16 PM
    not work!

    I tried

    <Click Handler="Ext.fly(Ext.getCmp('idEmployees').tabEl).child('x-tab-strip-close').hide();" />
    by IE shown error : 'Ext.getCmp(...).tabEl' is null or not an object

    by Chrome shown error : Uncaught TypeError: Cannot read property 'tabEl' of undefined
  6. #6
    Dec 16, 2011, 1:25 PM
    Please demonstrate how you create a tab.
  7. #7
    Dec 16, 2011, 1:39 PM
    I have viewport.aspx . in viewport has a left menu panel when clicked on Employees menu. It open tab 'Employees' (idEmployees -- call employees.aspx I rename from file 'accessgrid.aspx')

    I placed demo at

    http://www.k-library.net/ccg/viewport.aspx

    and full code

    http://www.k-library.net/ccg/viewport.aspx.txt

    http://www.k-library.net/ccg/employees.aspx.txt
  8. #8
    Dec 16, 2011, 2:00 PM
    Hi,

    When I attempt to run your sample code an Exception is thrown.

    Please simplify your sample down to the minimum amount of code required to reproduce the problem. You should require no more than 100 lines of code to demonstrate the problem.

    Once you have your code samples reduced, please post here in the forums and wrap your code samples inside of [CODE] tags.

    You can review the following documents for information and tips on creating code samples, see

    http://forums.ext.net/showthread.php...ing-New-Topics
    http://forums.ext.net/showthread.php...ation-Required
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  9. #9
    Dec 16, 2011, 2:34 PM

    Sorry for very long code.

    I reduce code

    min_viwport.aspx

    <%@ Page Language="C#" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<html>
<head runat="server">
    <title>LSWS</title>    
    <script type="text/javascript">
        var addTab = function(tabPanel, id, tabtitle, url) {
            var tab = tabPanel.getComponent(id);
            if (!tab) {
                tab = tabPanel.add({
                    id: id,
                    title: tabtitle,
                    closable: true,                    
                    autoLoad: {
                        showMask: true,
                        url: url,
                        mode: "iframe",
                        maskMsg: "Loading " + tabtitle + "..."
                    }
                });
             }
            tabPanel.setActiveTab(tab);
        }       
    </script>  
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Viewport runat="server" Layout="border">
        <Items>
            <ext:Panel runat="server" Region="North" Layout="HBoxLayout" Height="27" Collapsible="false">
                <Items>               
                    <ext:Panel ID="SolutionTitle" runat="server" Html="<H1>LSWS 2012</H1>" />                       
                </Items>
            </ext:Panel>
            <ext:Panel runat="server" Title="Module Explorer" Region="West" Layout="accordion" Width="225" MinWidth="225" MaxWidth="400">
                <Items>
					<ext:MenuPanel runat="server" Id="MenuPanel1" Title="Human Resources">
						<Menu ID="hrMenu" runat="server">
							<Items>
								<ext:MenuItem ID="employeesMenu" runat="server" Text="Employees">
									<Listeners>
										<Click Handler="addTab(#{TabPanel1},'idEmployees','Employees','min_employees.aspx');" />
									</Listeners>
								</ext:MenuItem>
							</Items>                                        
						</Menu>                                        
                    </ext:MenuPanel>					
                </Items>
            </ext:Panel>
            <ext:Panel runat="server" Region="center" Layout="FitLayout" >
                <Items>
                    <ext:TabPanel ID="TabPanel1" runat="server" Region="Center">
                        <Items>
                            <ext:Panel ID="homePanel" runat="server" Title="Portal" Html="<h1>Portal</h1>" />
                        </Items>
                    </ext:TabPanel>                   
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
</body>
</html>
    and min_employees.aspx

    <%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<html>
<head runat="server">
    <title>Employees Tab</title>
</head>

<body>

<form runat="server">

<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Button ID="ButtonHide" runat="server" Text="Hide">
    <Listeners>
        <Click Handler="Ext.fly(Ext.getCmp('idEmployees').tabEl).child('x-tab-strip-close').hide();" />
    </Listeners>
</ext:Button>
<ext:Button ID="ButtonShow" runat="server" Text="Show">
    <Listeners>
        <Click Handler="Ext.fly(Ext.getCmp('idEmployees').tabEl).child('x-tab-strip-close').show();" />
    </Listeners>
</ext:Button>
	
</form>
</body>
</html>
    Thank you for advice.
    Last edited by Aod47; Dec 16, 2011 at 2:36 PM.
  10. #10
    Dec 16, 2011, 2:50 PM
    It's the important fact that you are trying to access a parent page's tab from an iframe.

    Please use:
    parent.Ext.fly(parent.Ext.TabPanel1.getComponent('idEmployees').tabEl).child('x-tab-strip-close').hide();
Page 1 of 2 12 LastLast

Similar Threads

  1. [1.0] Portlet - Hide close button
    By serdias in forum 1.x Help
    Replies: 2
    Last Post: Nov 16, 2010, 10:10 PM
  2. [CLOSED] Add close (hide) tool button and event to Portlet
    By betamax in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 01, 2010, 1:16 PM
  3. Difference between ext window.close and hide
    By Hari in forum 1.x Help
    Replies: 3
    Last Post: Jan 07, 2010, 9:56 PM
  4. [CLOSED] Notification: hide close button when AutoHide = false
    By jchau in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 16, 2009, 3:10 PM
  5. How to - Display/Hide dynamically CheckBoxSelectionModel
    By knoll in forum 1.x Help
    Replies: 1
    Last Post: Apr 23, 2009, 12:28 PM

Tags for this Thread

Posting Permissions