Results 1 to 8 of 8

Thread: Ext.ux.TabCloseOnMiddleClick

  1. #1
    Sencha User
    Join Date
    Sep 2007
    Posts
    100
    Vote Rating
    4
      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,388
    Vote Rating
    499
      0  

    Default

    Thank you for the contribution.

  3. #3
    Sencha User SurenderBhyan1's Avatar
    Join Date
    Nov 2013
    Location
    INDIA
    Posts
    91
    Vote Rating
    10
      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
      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
    91
    Vote Rating
    10
      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
      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
      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
    91
    Vote Rating
    10
      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



Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •