Listen to enable/disable events on Sencha Touch

Question

I'm in the need to listen to a enable/disable event on a container and I've noticed that there's no such event. I tried to listen to it in case it wasn't mentioned in the docs but it definitely doesn't exist.

I google'd around a little and found this..

Ext.define('My.Custom.Container',{
    extend:'Ext.Container',
    onEnable:function(){
        console.log("it's listening");
    }
});

It looked promising but it didn't work at all.

Is there any way to listen to these events? I don't want to get jQuery mixed in here as it would be an overkill.

Answer 1

The container xtype from which many components inherit methods does have an event which fires on changing of it's disabled state. This event is called disabledchange and fires every time the container is either enabled/disabled.

In the below code we can see this in action working on a button purely as it gives a visually better demo (since you can immediately see the state) but it inherits the exact same method and event from Container.

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.Viewport.add({
            xtype: 'container',
            padding: 10,
            items: [{
                xtype: 'button',
                text: 'Button To be disabled/enabled',
                listeners: {
                    disabledchange: function(button, value, oldValue, eOpts) {
                        console.log('changing my disabled state to ' + value);
                    }
                }
            }, {
                xtype: 'button',
                text: 'click to disable/enable above button',
                listeners: {
                    tap: function() {
                        var isButtonDisabled = Ext.Viewport.query('button')[0].getDisabled();
                        Ext.Viewport.query('button')[0].setDisabled(!isButtonDisabled);
                    }
                }
            }]
        });
    }
});

Demo: https://fiddle.sencha.com/#fiddle/g46

Answer 2

Ok, I just found an answer to my question.

Ext.define('My.custom.Container',{
   extend:'Ext.Container',
   config:{
      ....config....
   },
   enable: function(){
       this.callParent(arguments);
       // do something else;
   },
   disable: function(){
      this.callParent(arguments);
      // do something else;
   }
});

I'm still curious if there's another way around this though. So answers are still welcome.