CODEWITHSUNDEEP
javascripteventsextjstabpanel
oneofakind
oneofakind

Reputation: 562

ExtJs Tabpanel Close Event with Closable tabs

The listener I set up with doesn't seem to trigger. Here is my code:

  new Ext.TabPanel({
        id:'content-tab-panel',
        renderTo: 'trx_tabs_ext',
        activeTab: 0,
        minTabWidth: 150,
        tabWidth:180,
        enableTabScroll: true,
        autoScroll: true,
        resizeTabs:true,
        defaults: {
            autoScroll:true
        },
        items: [{
            title: 'No Active Chat',
            id: 'no_chat',
            closable: true,
            autoScroll: false,
            margins: '0 0 0 0',
            html: "<div id=\"chat_window_viewer\"  style=\"width:900px;height:440px;text-align:left; \">&nbsp;</div>"
        }],
        width: '100%',
        height: '400px',
        listeners: {
            tabchange: function(tabPanel, newTab, oldTab, index)
            {
                console.log('change tab');
            },
            beforeadd : function (tabpane, component, index) {
                console.log('Adding new tab');
            },
            beforeclose: function(element) {
                console.log('closing');
            }
        }
    });

The beforeadd an tabchange triggers and do so by writing a log at the console. But, the beforeclose does not.

I also tried putting it inside the item of the Tabpanel, does not work either.

What is the correct way to adding a close event in the TabPanel?

Upvotes: 1

Views: 7191

Answers (3)

xGeo
xGeo

Reputation: 2139

Since Extjs 2.3.0, tabpanels have a beforeclose event:

beforeremove( this, component, eOpts )

Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.

Available since: 2.3.0

Parameters

  • this : Ext.container.Container
  • component : Ext.Component The component being removed
  • eOpts : Object The options object passed to Ext.util.Observable.addListener.

so just add a listener in your tabpanel:

listeners: {

    beforeremove: function (panel, item, eOpts) {
        console.log(item); // the tab to be removed
    }
 . . . . 
}

Upvotes: 0

Daydreaming Duck
Daydreaming Duck

Reputation: 2270

Which version of library you are using? Note that beforclose event available since 2.3.0.

It works for me when i listening event for item, not for whole panel

new Ext.TabPanel({
        id:'content-tab-panel',
        renderTo: 'trx_tabs_ext',
        activeTab: 0,
        minTabWidth: 150,
        tabWidth:180,
        enableTabScroll: true,
        autoScroll: true,
        resizeTabs:true,
        defaults: {
            autoScroll:true
        },
        items: [{
            title: 'No Active Chat',
            id: 'no_chat',
            closable: true,
            autoScroll: false,
            margins: '0 0 0 0',
            html: "<div id=\"chat_window_viewer\"  style=\"width:900px;height:440px;text-align:left; \">&nbsp;</div>",
            listeners:{
                'beforeclose': function(){console.log('closed')}
            }
        }],
        width: '100%',
        height: '400px',
        listeners: {
            tabchange: function(tabPanel, newTab, oldTab, index)
            {
                console.log('change tab');
            },
            beforeadd : function (tabpane, component, index) {
                console.log('Adding new tab');
            }
        }
    });

Upvotes: 0

newmount
newmount

Reputation: 1951

To get items close event, add listener to that item.

Fiddle here: https://fiddle.sencha.com/#fiddle/59f

Upvotes: 1

Related Questions