Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-6139 in a recent build.
  1. #1
    Sencha User
    Join Date
    Jun 2008
    Posts
    289
    Vote Rating
    16
    Qtx will become famous soon enough

      0  

    Default [4.1.0] The button retains the focused state after disabling and enabling

    [4.1.0] The button retains the focused state after disabling and enabling


    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.1.0


    Browser versions tested against:

    Problem occurs:
    • IE 9.0.8112.16421
    • FF 12.0, firebug 1.9.1
    Problem does not occur:
    • Opera 11.62
    • Chrome 18
    • Safari 5.1.5

    Description:
    • The button retains the focused state after disabling and subsequent enabling.
    • Often, a button fires an action, which should disable all buttons including this button until it completes.

    Steps to reproduce the problem:
    • Use the demo example menu.js
    • Add a button, which will disable itself for a couple of seconds, enable it through setTimeout
    • Run the example
    • Push the button and take the cusrsor away, after the button is enabled it retains the focused state


    The result that was expected:
    • The focused state should be removed


    The result that occurs instead:
    • The focused state is retained


    HELPFUL INFORMATION

    Debugging already done:
    • yes


    Possible fix:

    This override shows what should be added to the original method Button.disable().

    Code:
    Ext.override(Ext.button.Button, {
    
        disable: function(silent) {
            var me = this;
    
            me.callParent(arguments);
    
            if (me.btnEl) {
                me.btnEl.dom.disabled = true;
            }
            me.addClsWithUI('disabled');
            me.removeClsWithUI(me.overCls);
            
            var targetEl = me.getEl();
            if (me.focusCls && targetEl) {
                targetEl.removeCls(me.removeClsWithUI(me.focusCls, true));
            }
    
            // IE renders disabled text by layering gray text on top of white text, offset by 1 pixel. Normally this is fine
            // but in some circumstances (such as using formBind) it gets confused and renders them side by side instead.
            if (me.btnInnerEl && (Ext.isIE6 || Ext.isIE7)) {
                me.btnInnerEl.repaint();
            }
    
            return me;
        }
        
    }); // Ext.button.Button
    Additional CSS used:
    • only default ext-all.css


    Operating System:
    • Windows 7

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,647
    Vote Rating
    583
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Can you post a test case? I wasn't able to reproduce this:

    Code:
    Ext.require('Ext.picker.Color');
    Ext.onReady(function() {
        
        var btn = Ext.create('Ext.button.Button', {
            renderTo: document.body,
            text: 'Foo',
            handler: function(btn) {
                btn.disable();
                setTimeout(function(){
                    btn.enable();
                }, 1000);
            }
        });
        
    });
    I click the button and move my mouse away, when the button enables there is no focusCls applied.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User
    Join Date
    Jun 2008
    Posts
    289
    Vote Rating
    16
    Qtx will become famous soon enough

      0  

    Default


    Hi,

    I place the example here

    http://www.point-constructor.com/ext...enu/menus.html

    I have just used the example menus.html and added the button Test which disables itself for 2 seconds. After enabling, the button has the highlighted style, which does not go away anymore.

    After enabling the button should be just normal as before disabling.extm.jpg

  4. #4
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    25
    Vote Rating
    1
    lmalgras is on a distinguished road

      0  

    Default


    Here is a manual test case for this bug : http://jsfiddle.net/DRg37/

    All focus related class are not removed from the button dom element when it is disabled.

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,647
    Vote Rating
    583
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    I'm still not following, am I doing something wrong here?

    http://screencast.com/t/OOxUsxznD9o
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Sencha User
    Join Date
    Jun 2008
    Posts
    289
    Vote Rating
    16
    Qtx will become famous soon enough

      0  

    Default


    I seems to have problems only in the Firefox and IE. Opera, Chrome and Safari are OK.

    Sorry for not precise information!

  7. #7
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    25
    Vote Rating
    1
    lmalgras is on a distinguished road

      0  

    Default


    Qtx is right. I reproduce this bug only on Firefox and on Internet Explorer.

  8. #8
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    25
    Vote Rating
    1
    lmalgras is on a distinguished road

      0  

    Default


    This bug is fixed since Ext JS 4.1.1
    Thank you

Thread Participants: 2