[FIXED-EXTJSIV-272] Ext.util.Observable as mixin serious limitation

[gevik]

I have been trying to override Ext.util.Observable's functions (fireEvent and ctor) to add some custom stuff to be used globally. I followed the callOverridden example which at first looks just wonderful.

However after creating a very simple implementation I get the following error:

[Ext.button.Button#callOverridden] Calling a protected method from the public scope
ext-core-debug.js Line 2383

Here is the code:

    Ext.override(Ext.util.Observable,{

        constructor:function()
        {
            console.log('custom ctor');
            this.callOverridden(arguments);
        },

        fireEvent:function()
        {
            console.log('customer fireEvent');
            this.callOverridden(arguments);
        }
    });

    Ext.onReady(function(){
        Ext.create('Ext.button.Button',{
            text:'Click Me',
            scale:'large',
            renderTo:Ext.getBody()}
    );
    })

Am I doing something wrong here?

After digging in the stack-trace I found the problem at Ext.AbstractComponent's constructor:

me.mixins.observable.constructor.call(me);

The way mixins are utilized in the framework, like the code fragment above, also prevents interceptors and sequences to function correctly on classes which are used as mixins. After testing I found that only the original function is called. The interceptor is not called.

Now, I asked this question before, but did not get a founded answer. So here it goes again:
Since 98% of all the functionality in the framework has something to do with events and event handlers why on earth is the Ext.util.Observable not used as a base class for classes which need to have observability? Like the Ext.AbstractComponent!

Second, Why is the usage of Ext.util.Observable not consistent. Like in the Ext.Application which extends from Ext.util.Observable and not uses it as mixin.

Please clarify

[Jacky Nguyen]

Please use the override static class method instead. This should work:

Ext.util.Observable.override({
    constructor:function() {
        console.log('custom ctor');
        this.callOverridden(arguments);
    },

    fireEvent:function() {
        console.log('customer fireEvent');
        this.callOverridden(arguments);
    }
});

[Jacky Nguyen]

Ext.override has been made an alias to Ext.Base.override. Both ways will work from the next release onwards.

[gevik]

The static override method only worked for the ctor but not for the fireEvent override!
Is this also in the fix for the next release?

    Ext.util.Observable.override({
        constructor:function() {
            console.log('custom ctor');
            this.callOverridden(arguments);
        }
    });

    Ext.util.Observable.override({
        fireEvent:function() {
            console.log('customer fireEvent');
            return this.callOverridden(arguments);
        }
    });

    Ext.onReady(function(){
        Ext.create('Ext.button.Button',{
            text:'Click Me',
            scale:'large',
            listeners:{
                click:function()
                {
                    console.log('from button');
                }
            },
            renderTo:Ext.getBody()}
        );
    })

[Jacky Nguyen]

DOM events are not fired via Ext.util.Observable#fireEvent at the moment, but rather via Ext.util.Event#fire. Hence if you want to intercept DOM events, this should work:

Ext.util.Event.override({
    fire: function() {
        console.log('before fire...');
        this.callOverridden(arguments);
        console.log('after fire...');
    }
});

[gevik]

DOM events are not fired via Ext.util.Observable#fireEvent at the moment, but rather via Ext.util.Event#fire. Hence if you want to intercept DOM events, this should work:

It works as you provided in the code. Thank you.
But don't you think this behavior is kind of confusing? This means that one has to override within different levels of the framework to get something this simple accomplished!

Is this behavior going to stay or can we expect DOM events being fired via Ext.util.Observable#fireEvent ?

[evant]

It has always been this way. They are 2 separate event structures, I don't think it's a good idea to mix the management of synthetic events with real DOM events.

DOM events also have several options (delegate, target) that aren't available to synthetic events.

[gevik]

Makes perfectly sense, thank you both.