Disabled button enables when parent container got enabled

[Alexey.Solonets]

Ext version tested:

• 5.1.1.347

Description:

• Container with button both set 'disabled: true' explicitly. When parent container is set enabled button also looks enabled.

Steps to reproduce the problem:

• https://fiddle.sencha.com/#fiddle/js2
• Click 'Toggle disabled'

The result that was expected:

• Button to remain visually disabled

The result that occurs instead:

• Button visually enabled

I know there are similar threads:
http://www.sencha.com/forum/showthread.php?295910 (says fixed)
http://www.sencha.com/forum/showthread.php?296873 (dup)

But there were opposite problem: button with initial enabled state remained disabled when parent container was set enabled.

Problem code:

Ext.container.Container:

    /**     
     * @override
     * Disables all child input fields and buttons.
     */
    disable: function(silent, /* private */fromParent) {
        var me = this,
            wasDisabled = me.disabled,
            itemsToDisable, len, i;


        me.callParent([silent, fromParent]);


        if (!fromParent && !me.preventChildDisable && !wasDisabled) {
            itemsToDisable = me.getChildItemsToDisable();
            len = itemsToDisable.length;


            for (i = 0; i < len; i++) {
                itemsToDisable[i].disable(silent, true); // button doesn't respect second argument
            }
        }
        return me;
    },


    /**
     * @override
     * Enables all child input fields and buttons.
     */
    enable: function(silent, /* private */fromParent) {
        var me = this,
            wasDisabled = me.disabled,
            itemsToDisable, len, i;


        me.callParent([silent, fromParent]);


        if (wasDisabled) {
            itemsToDisable = me.getChildItemsToDisable();
            len = itemsToDisable.length;


            for (i = 0; i < len; i++) {
                itemsToDisable[i].enable(silent, true); // button doesn't respect second argument
            }
        }


        return me;
    },

[Alexey.Solonets]

Workaround (may be not perfect)

Ext.define('Ext.bf.button.Button', {
    override: 'Ext.button.Button',
    
    enable: function (silent, fromParent) {
        fromParent = !!fromParent;
        if (fromParent == this.disabledFromParent) {
            this.callParent(arguments);
        }
        else if (fromParent) {
            this.disabledFromParent = false;
        }
    },


    disable: function (silent, fromParent) {
        fromParent = !!fromParent;
        if (!this.disabled) {
            this.disabledFromParent = fromParent;
            this.callParent(arguments);
        }
    }
});

[Gary Schlosberg]

Thanks for the report and workaround! I have opened a bug in our bug tracker.

[Alexey.Solonets]

Another workaround that is better for me so far

Ext.define('Ext.bf.button.Button', {
    override: 'Ext.button.Button',
    
    enable: function (silent, fromParent) {
        if (!fromParent) {
            this.callParent(arguments);
        }
    },


    disable: function (silent, fromParent) {
        if (!fromParent) {
            this.callParent(arguments);
        }
    }
});

[SebTardif]

Opened Sencha ticket 22400 to get this resolved in a timely fashion.

[SebTardif]

That issue have not been looked at by Sencha since 2015-03-27. Why the override is just not integrated to the framework?

[nicolabaldo]

I've got the same problem.
My version is 5.1.1.451.
Any solution from Sencha support???