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

      2  

    Default 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,367
    Vote Rating
    495
    scottmartin is a jewel in the rough scottmartin is a jewel in the rough scottmartin is a jewel in the rough

      0  

    Default

    Thank you for the contribution.

  3. #3
    Sencha User SurenderBhyan1's Avatar
    Join Date
    Nov 2013
    Location
    INDIA
    Posts
    79
    Vote Rating
    8
    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
    4
    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
    79
    Vote Rating
    8
    SurenderBhyan1 is on a distinguished road

      1  

    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
    4
    adam.jimenez is on a distinguished road

      0  

    Default

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

  7. #7
    Sencha User
    Join Date
    May 2015
    Location
    Czech Republic
    Posts
    3
    Vote Rating
    0
    Marthy is on a distinguished road

      0  

    Default Fix for non-closable tabs

    Hello,
    I found that you can close even tabs, that have closable option set to false, which brought us much joy here in the office, just going around our app, closing everything.

    Here is an easy fix for that:
    Code:
    var item = this.tabBar.getComponent( target.id );
    if ( item.closable ) {
        item.onCloseClick( );
    }

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

      0  

    Default

    Quote Originally Posted by Marthy View Post
    Hello,
    I found that you can close even tabs, that have closable option set to false, which brought us much joy here in the office, just going around our app, closing everything.

    Here is an easy fix for that:
    Code:
    var item = this.tabBar.getComponent( target.id );
    if ( item.closable ) {
        item.onCloseClick( );
    }
    Thank you Marthy, I also tested your changes . working fine.
    Surender Bhyan
    Mohali



Thread Participants: 3

Tags for this Thread