[FIXED-EXTJSIV-1814]Tab and beforeclose

[ermoha]

No response on event boforeclose. Use close button(closable:true).

[ermoha]

In finally release extjs 4 error was saved.

[ermoha]

setClosable() undefined

[evant]

I'm not really sure on what you're saying, can you please post a short test case?

[cadorn]

The 'close' and 'beforeclose' events are not firing on the Tab.tab.Tab component (ExtJS 4).

new Ext.ux.devcomp.tab.Tab({
  title: "Title",
  closable: true,
  listeners: {
    beforeclose: function()
    {
      // not firing
    }
  }
});

In the component source:

    syncClosableElements: function () {
        var me = this;

        if (me.closable) {
            if (!me.closeEl) {
                me.closeEl = me.el.createChild({
                    tag: 'a',
                    cls: me.baseCls + '-close-btn',
                    href: '#',
                    html: me.closeText,
                    title: me.closeText
                }).on('click', Ext.EventManager.preventDefault);  // mon ???
            }
        } else {
            var closeEl = me.closeEl;
            if (closeEl) {
                closeEl.un('click', Ext.EventManager.preventDefault);
                closeEl.remove();
                me.closeEl = null;
            }
        }
    },

I think something like the following is missing:

me.closeEl.on('click', me.onCloseClick());

[evant]

I can't reproduce this:

Ext.onReady(function() {
    
    var tabs = Ext.create('Ext.tab.Panel', {
        width: 200,
        height: 200,
        renderTo: document.body,
        items: [{
            title: 'A',
            closable: true
        }, {
            title: 'B',
            closable: true
        }]    
    });
    
    tabs.items.each(function(tab){
        tab.tab.on('beforeclose', function(){
            console.log('closing!');    
        });
    });
});

Hit the close button, the event fires. Am I missing something?

[cadorn]

Maybe it is because I am using the tab panel within a top toolbar?

new Ext.panel.Panel({
    layout: "card",
    border: 0,
    tbar: new Ext.toolbar.Toolbar({
        border: 0,
        items: [
            (tabs = new Ext.tab.Panel({
                enableTabScroll: true,
                activeTab: 0,
                width: "100%",
                items: [
                    {
                        title: "title",
                        closable: true,
                        listeners: {
                            beforeclose: function()
                            {
                                // not firing
                            }
                        }
                    }
                ]
            }))
        ]
    }),
    items: [
       ...
    ]
});

[ermoha]

Ext.onReady(function() {
    
    var tabs = Ext.create('Ext.tab.Panel', {
        width: 200,
        height: 200,
        renderTo: document.body,
        items: [{
            title: 'A',
            closable: true,
            listeners:{
            beforeclose:function(){
                         //not fire, in ext 3 fire
                  }
             }
        }]    
    });
    
  
});

[evant]

Ok, I'm with you now. In the next version the beforeclose/close will fire on the panel itself, with the ability to veto the event by returning false in beforeclose.