[CLOSED] How to toggle the Tab Panel "close" button?

  1. #1

    [CLOSED] How to toggle the Tab Panel "close" button?


    Is there any easy way in v3.2 to toggle the visibility of the little "x" button on a Tab panel? In essence, the requirement is to switch the Tab Panel "close-ability" on and off on the client.
    Last edited by Daniil; Aug 26, 2015 at 7:21 AM. Reason: [CLOSED]
  2. #2
    Hi Vadym,

    I don't see an API method that would do that. Though, iterating tabs and toggling visibility of its close tools should not be difficult. Please let me know if help to implement is needed.
  3. #3
    Thanks, Daniil, further guidance would be appreciated. I've put together a little test case below to get started.

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <head id="Head1" runat="server">
        <title>Ext.NET Examples</title>
            var toggle = function (show) {
                var activeTab = App.TabPanel1.getActiveTab();
                for (var i = 0; i < activeTab.tools.length; i++) {
                    if (activeTab.tools[i].type == "close") {
                        // A tool instance doesn't have setVisible() defined so this doesn't work
    // Something along these lines used to work in v1.7 but not any longer
                if (show) {
                    Ext.get(activeTab.tab.getEl()).dom.className = Ext.String.format("{0}{1}", "x-tab-closable ", Ext.get(activeTab.tab.getEl()).dom.className);
                else {
                    var className = Ext.get(activeTab.tab.getEl()).dom.className.replace(/x-tab-closable /g, "");
                    Ext.get(activeTab.tab.getEl()).dom.className = className;
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
                    <ext:Panel runat="server" Region="North" Layout="FormLayout" Height="120">
                            <ext:Button runat="server" Text="Show">
                                    <Click Handler="toggle(true);"></Click>
                            <ext:Button runat="server" Text="Hide">
                                    <Click Handler="toggle(false);"></Click>
                    <ext:TabPanel ID="TabPanel1" runat="server" MinTabWidth="120" Region="Center">
                            <ext:Panel ID="Panel1" runat="server" Icon="Book" Title="Ext.Net" Closable="true">
                            <ext:Panel ID="Panel2" runat="server" Icon="Find" Title="Sencha" Closable="true">
  4. #4
    This code hides close tools:
    App.TabPanel1.items.each(function(tabComponent) { 
  5. #5
    Thanks, Daniil! That was helpful, please close this thread.

Similar Threads

  1. Replies: 3
    Last Post: Sep 01, 2015, 11:08 PM
  2. Toggle buton and Stateful="true"
    By ADV in forum 2.x Help
    Replies: 1
    Last Post: May 16, 2014, 2:54 PM
  3. Replies: 0
    Last Post: Mar 13, 2014, 4:34 AM
  4. Replies: 5
    Last Post: Jul 19, 2012, 12:09 PM
  5. Replies: 5
    Last Post: May 02, 2012, 5:37 PM

Tags for this Thread

Posting Permissions