1. #1
    Sencha User
    Join Date
    Sep 2007
    Posts
    100
    Vote Rating
    1
    adam.jimenez is on a distinguished road

      0  

    Default Ext.ux.TabCloseOnMiddleClick

    Ext.ux.TabCloseOnMiddleClick


    Closes tab when middle mouse button is clicked on the tab bar.

    Based on: http://www.sencha.com/forum/showthre...l=1#post172321


    Code:
    Ext.define('Ext.ux.TabCloseOnMiddleClick', {    
        alias: 'plugin.TabCloseOnMiddleClick',
    
        mixins: {
            observable: 'Ext.util.Observable'
        },
        
        init : function(tabpanel){        
            this.tabPanel = tabpanel;
            this.tabBar = tabpanel.down("tabbar");
    
            this.mon(this.tabPanel, {
                scope: this,
                afterlayout: this.onAfterLayout,
                single: true
            });
        },
        
        onAfterLayout: function(){
            this.mon(this.tabBar.el, {
                scope: this,
                mousedown: this.onMouseDown,
                delegate: '.x-tab'
            });
            this.mon(this.tabBar.el, {
                scope: this,
                mouseup: this.onMouseUp,
                delegate: '.x-tab'
            });
        },
    
        onMouseDown: function(e){
            e.preventDefault();
        },
    
        onMouseUp: function(e, target){
            e.preventDefault();
            
            if( target &&  e.browserEvent.button==1  ){
                var item = this.tabBar.getComponent(target.id);
                item.onCloseClick();
            }
        }
    });
    usage:
    Code:
    Ext.onReady(function(){
        var panel = new Ext.TabPanel({
            renderTo: Ext.getBody(),
            plugins: [Ext.create('Ext.ux.TabCloseOnMiddleClick')],
            width: 500,
            height: 300,
            activeItem: 0,
            items: [{
                title: 'item 1'
            }, {
                title: 'item 2',
                closable: true
            }, {
                title: 'item 3',
                closable: true
            }]
        });
    });

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,214
    Vote Rating
    482
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Thank you for the contribution.

  3. #3
    Sencha User SurenderBhyan1's Avatar
    Join Date
    Nov 2013
    Location
    INDIA
    Posts
    39
    Vote Rating
    4
    SurenderBhyan1 is on a distinguished road

      0  

    Default


    Plugin not working in IE 10 (Ext JS 4.2.1)

    Please check :
    https://fiddle.sencha.com/#fiddle/gof
    Surender Bhyan
    Mohali



  4. #4
    Sencha User
    Join Date
    Sep 2007
    Posts
    100
    Vote Rating
    1
    adam.jimenez is on a distinguished road

      0  

    Default


    wfm in IE11 so will assume this was an IE bug that got fixed.

  5. #5
    Sencha User SurenderBhyan1's Avatar
    Join Date
    Nov 2013
    Location
    INDIA
    Posts
    39
    Vote Rating
    4
    SurenderBhyan1 is on a distinguished road

      0  

    Default


    Hi Adam,

    Debugged the plugin, and found that e.button is always 0 for click and middle click in case of IE 10.
    So control is getting bypassed here. otherwise great plugin. Thanks

    Code:
    if (target && e.button == 1) {
                var item = this.tabBar.getComponent(target.id);
                item.onCloseClick();
            }
    In order to make it work for cross browser, We need to test for e.browserEvent.button ==1

    Code:
    if (target && e.browserEvent.button == 1) {
                var item = this.tabBar.getComponent(target.id);
                item.onCloseClick();
     }


    Now it will works for IE 10 too
    Surender Bhyan
    Mohali



  6. #6
    Sencha User
    Join Date
    Sep 2007
    Posts
    100
    Vote Rating
    1
    adam.jimenez is on a distinguished road

      0  

    Default


    Thanks for the fix, I've updated the first post.

Thread Participants: 2

Tags for this Thread