Fire event when a tab is closed

**Esparry** · 1 Jul 2009 8:37 AM

Hi, this is my first post, I have a problem here, I hope you folks can help me.
I have a ext Window container, inside I have two items, an ext.tabPanel (limitInfoTab) and a single ext.panel (LimitsList)

Inside the ext.panel(LimitsList) I've got a list of checkboxes, when I do the "onclick" on one of those checkboxes, a new tab is added to my tabpanel.

Now, I need to fire an event when I click on the close button for each tabs added to my tabpanel. I tried a lot of things and I have been reading many post in this forum, but I just can't find a way

Code:

function addTab(limitID,domObj){
                limitInfoTab.add({
                    title: domObj,
                    id: 'tab_'+limitID,
                    closable:true,
                    /*handler: function(){
                                this.on('beforeremove',alert('closing'))
                              },*/
                    autoLoad: {url: "some page with the html content for this panel"}
                }).show();

Thanks.

**tryanDLS** · 1 Jul 2009 8:45 AM

Instead of handler

Code:

listeners:{close: function() {alert('Closed')}}

**Esparry** · 1 Jul 2009 9:08 AM

Hi Tryan
I used it , but when I click on the close button of the tab nothing happens. I've got the instantiation of this tabPanel in other section of the code. Maybe this is affecting the behavior.

**tryanDLS** · 1 Jul 2009 10:38 AM

http://extjs.com/learn/Ext_Forum_Hel...rking_showcase

**Esparry** · 1 Jul 2009 12:48 PM

Ok this is the "Run as it code", the goal is fire an event when you click on the close button from each tab, the tabs are generated when you click on the checkboxes.

Code:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title id='title'>Title</title>
 
        <!-- ** CSS ** -->
        <!-- base library -->
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
 
        <!-- overrides to base library -->
 
 
        <!-- ** Javascript ** -->
        <!-- base library -->
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext-all-debug.js"></script>
 
 
        <!-- overrides to base library -->
 
        <!-- extensions -->
 
        <!-- page specific -->
 
        <script type="text/javascript">
        Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
 
        Ext.onReady(function(){
			
			    var button = Ext.get('show-btn');
			
			    button.on('click', function(){
			
			        limitInfoTab = new Ext.TabPanel({
					   enableTabScroll:true,
				       region    : 'center',
			           margins   : '3 3 3 0', 
			           activeTab : 0,
					   width     : 400,
				       defaults: {autoScroll:true}//,
				       // plugins: new Ext.ux.TabCloseMenu()
		   		 });
			
			        // Panel for the west
			        var nav = new Ext.Panel({
			            title       : 'Navigation',
			            region      : 'west',
			            split       : true,
			            width       : 200,
			            collapsible : true,
			            margins     : '3 0 3 3',
			            cmargins    : '3 3 3 3',
						//the next list is generated dynamic from some place
						html : '<div id="divLimitList"><input type="checkbox" name="ch1" value="1" id="1" onclick="addTab(this);"><br><input type="checkbox" name="ch2" id="2" value="2" onclick="addTab(this);"><br><input type="checkbox" name="ch3" value="3" id="3" onclick="addTab(this);"></div>'
			        }); 
			
			        var win = new Ext.Window({
			            title    : 'Layout Window',
			            closable : true,
			            width    : 600,
			            height   : 350,
			            //border : false,
			            plain    : true,
			            layout   : 'border',
			            items    : [nav, limitInfoTab]
			        });
			
			        win.show(button);
			    });
			});//end onReady
					
			   function addTab(obj){
		        limitInfoTab.add({
		            title: obj.name,
					id: 'tab_'+obj.id,
		            closable:true,
					//if you click on the close button of this tab ,fire an event.
					listeners:{close: function() {alert('Closed')}} 
					//autoLoad: {url: ''}
		        }).show(); 
		    }	
        </script>
 
    </head>
    <body>
<input type="button" id="show-btn"  value="Show Window"/>
    </body>
</html>

I Hope this works for you, thx for helping me

**tryanDLS** · 1 Jul 2009 1:24 PM

Not sure what's going on here yet. These events fire fine in 3.0, but not 2.2.1

**euchiyama** · 1 Jul 2009 3:38 PM

Take out the listener on the tab and put one on the TabPanel:

Code:

                    limitInfoTab = new Ext.TabPanel({
                       enableTabScroll:true,
                       region    : 'center',
                       margins   : '3 3 3 0',
                       activeTab : 0,
                       width     : 400,
                       defaults: {autoScroll:true},
                         listeners: {
                                 remove: function(tabPanel,tab) {
                                         alert('Closed ' + tab.id);
                                    }}

...

               function addTab(obj){
                limitInfoTab.add({
                    title: obj.name,
                    id: 'tab_'+obj.id,
                    closable:true,
                    //if you click on the close button of this tab ,fire an event.
                    listeners:{close: function() {alert('Closed')}} 
                    //autoLoad: {url: ''}

**Esparry** · 2 Jul 2009 6:08 AM

Great, It's working now

, I just don't understand, why if I put this on the function:

Code:

remove: function(limitInfoTab,tab) {
            alert('Closed ' + tab.id);
            }

the "tab" is recognized? is some kind of default setting? I mean my object is "limitInfoTab",
whenever I click on a tab close button nested to the limitInfoTab, limitInfoTab will know
wich of the tab has been closed?

Thx to everybody for helping me, I'm a new extjs user, I really like to be part of this community.

**tryanDLS** · 2 Jul 2009 6:50 AM

Not sure what you're asking. The TabPanel and the tab being removed are passed as args to your handler.

Fire event when a tab is closed

Thread Tools

Search Thread

Display

Fire event when a tab is closed

Fire event when a tab is closed