How to display / hide 'close' button on Tab

**Aod47** · Dec 16, 2011, 7:33 PM

I tried code but still error.

IE: 'parent.Ext.TabPanel1' is null or not an object
Chrome: Cannot call method 'getComponent' of undefined

I tried add 2 buttons (objCheck, Hide2)

<ext:Button ID="objCheck" runat="server" Text="objCheck">
    <Listeners>
        <Click Handler="alert(parent.idEmployees.tabEl);" />
    </Listeners>
</ext:Button>
<ext:Button ID="ButtonHide2" runat="server" Text="Hide2">
    <Listeners>
        <Click Handler="parent.Ext.fly(parent.idEmployees.tabEl).child('x-tab-strip-close').hide();" />
    </Listeners>
</ext:Button>

when click 'objCheck' button it seem to be found [Object] for IE or [Object HTMLLIElement] for Chrome
but when use with command "parent.Ext.fly ... "

still error

IE: 'parent.Ext.fly(...).child(...)' is null or not an object
Chrome: Cannot call method 'hide' of null

**Daniil** · Dec 17, 2011, 4:59 AM

You have missed a dot in ".x-tab-strip-close" and I've accidentally copied this error.

Also this thing

parent.Ext.TabPanel1

was my error, must be:

parent.TabPanel1

Finally, the following code works.

parent.Ext.fly(parent.TabPanel1.getComponent('idEmployees').tabEl).child('.x-tab-strip-close').hide();

Example Parent Page

<%@ Page Language="C#" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
 
<html>
<head runat="server">
    <title>Ext.NET Example</title>    
    <script type="text/javascript">
        var addTab = function (tabPanel, id, title, url) {
            var tab = tabPanel.getComponent(id);
            if (!tab) {
                tab = tabPanel.add({
                    id : id,
                    title : title,
                    closable : true,                    
                    autoLoad : {
                        showMask : true,
                        url : url,
                        mode : "iframe",
                        maskMsg : "Loading " + title + "..."
                    }
                });
             }
            tabPanel.setActiveTab(tab);
        }       
    </script>  
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:Viewport runat="server" Layout="border">
        <Items>
            <ext:Panel 
                runat="server" 
                Region="West"
                Width="225">
                <Items>
                    <ext:MenuPanel runat="server">
                        <Menu runat="server">
                            <Items>
                                <ext:MenuItem runat="server" Text="Employees">
                                    <Listeners>
                                        <Click Handler="addTab(#{TabPanel1}, 'idEmployees', 'Employees', 'Test.aspx');" />
                                    </Listeners>
                                </ext:MenuItem>
                            </Items>                                        
                        </Menu>                                        
                    </ext:MenuPanel>                  
                </Items>
            </ext:Panel>
            <ext:TabPanel ID="TabPanel1" runat="server" Region="Center" />
        </Items>
    </ext:Viewport>
</body>
</html>

Example IFrame Page

<%@ 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:Button runat="server" Text="Hide">
            <Listeners>
                <Click Handler="parent.Ext.fly(parent.TabPanel1.getComponent('idEmployees').tabEl).child('.x-tab-strip-close').hide();" />
            </Listeners>
        </ext:Button>
        <ext:Button runat="server" Text="Show">
            <Listeners>
                <Click Handler="parent.Ext.fly(parent.TabPanel1.getComponent('idEmployees').tabEl).child('.x-tab-strip-close').show();" />
            </Listeners>
        </ext:Button>
    </form>
</body>
</html>

**Aod47** · Dec 17, 2011, 11:07 AM

problem solved, you can mark the thread as closed. :)

Thread: How to display / hide 'close' button on Tab

Thread Tools

Search Thread

Display

still error

Thank you Sir,

Similar Threads

[1.0] Portlet - Hide close button

[CLOSED] Add close (hide) tool button and event to Portlet

Difference between ext window.close and hide

[CLOSED] Notification: hide close button when AutoHide = false

How to - Display/Hide dynamically CheckBoxSelectionModel

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources