1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    464
    Vote Rating
    1
    JorisA is on a distinguished road

      0  

    Default Tab is activated when close button clicked

    Tab is activated when close button clicked


    See Tabs Example 2.
    When you close tab that is not the active one, it will be activated before its closed.

    stopEvent() should prevent the tab from receiving the click event. but somehow this doesnt work I think.

    PHP Code:
        /** @private */
        
    closeClick : function(e){
            var 
    = {};
            
    e.stopEvent();
            
    this.fireEvent("beforeclose"thiso);
            if(
    o.cancel !== true){
                
    this.tabPanel.removeTab(this.id);
            }
        } 

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    I don't see this behavior. The click event for the close icon would fire first (even if it bubbles) and it removes the tab.
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    464
    Vote Rating
    1
    JorisA is on a distinguished road

      0  

    Default


    Hm I really do, try holding your mouse button for a sec when clicking the close button.

  4. #4
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    yeah tried holding the mouse button and it does what u say.

    however.... if you press and hold down your mouse button, is it still considered a click?

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Ahah! That would be a mousedown which goes through this code:

    Code:
        onTabMouseDown : function(e){
            e.preventDefault();
            this.tabPanel.activate(this.id);
        },
    Perhaps that could check the target, and only activate if the original target was not the close button.

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Posts
    464
    Vote Rating
    1
    JorisA is on a distinguished road

      0  

    Default


    I guess your totally right
    Nice one.

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Try adding this code after including ext-all.js:

    Code:
    Ext.override(Ext.TabPanelItem, {
        onTabMouseDown : function(e){
            e.preventDefault();
            if (!e.getTarget().hasClass("close-icon")) {
                this.tabPanel.activate(this.id);
            }
        }
    });

  8. #8
    Sencha User
    Join Date
    Mar 2007
    Posts
    464
    Vote Rating
    1
    JorisA is on a distinguished road

      0  

    Default


    Error: e.getTarget().hasClass is not a function
    Still works since the tab is activated onclick. but no longer on mousedown.

    Maybe you mean getTarget(false, false, true) (return a Ext.Element object instead of DOM node).

    But... this doesnt seem to work eather, I guess this is due to another bug in EventObject: It never returns a Ext.Element

    PHP Code:
            getTarget : function(selectormaxDepthreturnEl){
                return 
    selector Ext.fly(this.target).findParent(selectormaxDepthreturnEl) : this.target;
            } 
    shoulnt this be something like
    PHP Code:
    Ext.override(Ext.EventObject, {
        
    getTarget : function(selectormaxDepthreturnEl){
            if(
    selector) {
                return 
    Ext.fly(this.target).findParent(selectormaxDepthreturnEl);
            }
            else {
                return 
    returnEl Ext.get(this.target) : this.target;
            }
        }
    }); 

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    This works:

    Code:
    Ext.override(Ext.TabPanelItem, {
        onTabMouseDown : function(e){
            e.preventDefault();
            var t = Ext.get(e.getTarget());
            if (!t.hasClass("close-icon")) {
                this.tabPanel.activate(this.id);
            }
        }
    });

  10. #10
    Sencha User
    Join Date
    Mar 2007
    Posts
    464
    Vote Rating
    1
    JorisA is on a distinguished road

      0  

    Default


    It does thank you.
    But isnt the other thing a bug as well?