Results 1 to 8 of 8

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

    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
    316
    Vote Rating
    24
      0  

    Default [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
    18,597
    Vote Rating
    874
      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
    Twitter - @evantrimboli

  3. #3
    Sencha User
    Join Date
    Jun 2008
    Posts
    316
    Vote Rating
    24
      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
    27
    Vote Rating
    1
      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
    18,597
    Vote Rating
    874
      0  

    Default

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

    http://screencast.com/t/OOxUsxznD9o
    Evan Trimboli
    Twitter - @evantrimboli

  6. #6
    Sencha User
    Join Date
    Jun 2008
    Posts
    316
    Vote Rating
    24
      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
    27
    Vote Rating
    1
      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
    27
    Vote Rating
    1
      0  

    Default

    This bug is fixed since Ext JS 4.1.1
    Thank you

Posting Permissions

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