Overriding Extjs classes and invoking callParent

Question

I have a few months of experience developing Extjs web application. I ran into this problem:

When I override a class, I modified the method and followed the previous implementation and invoke callParent(). The overriding part works but the callParent() invoked the old implementation.

my overriding code

Ext.override(Ext.layout.component.Draw, {
    finishedLayout: function (ownerContext) {

        console.log("new layouter being overriden");
        this.callParent(arguments);
    }
});

The Extjs class method to be overridden:

finishedLayout: function (ownerContext) {
    var props = ownerContext.props,
        paddingInfo = ownerContext.getPaddingInfo();

    console.log("old layouter being overriden");
    this.owner.setSurfaceSize(props.contentWidth - paddingInfo.width, props.contentHeight - paddingInfo.height);

    this.callParent(arguments);
}

In the console, I can see that first the new layouter prints out the message followed by the old layouter implementation... I put a breakpoint and retrace the invocation stack, the callParent() of the new layouter called the old one. I need to call the parent class, but not the overridden method.

Any idea how to solve this problem?

Sorry to left out the version that I used, I am using ExtJs 4.1.2. The chosen answer is the correct approach but I could not use it, instead I used the answer provided by @wantok. — Seng Zhe
By the way, bypassing one of your supers is a big hack, use it wisely and sparingly! — Juan Mendes

hopper hopper · Accepted Answer · 2013-04-09T14:14:14

If you're using ExtJS 4.1.3 or later you can use this.callSuper(arguments) to "skip" the overridden method and call the superclass implementation.

The ExtJS documentation for the method provides this example:

Ext.define('Ext.some.Class', {
    method: function () {
        console.log('Good');
    }
});

Ext.define('Ext.some.DerivedClass', {
    method: function () {
        console.log('Bad');

        // ... logic but with a bug ...

        this.callParent();
    }
});

Ext.define('App.patches.DerivedClass', {
    override: 'Ext.some.DerivedClass',

    method: function () {
        console.log('Fixed');

        // ... logic but with bug fixed ...

        this.callSuper();
    }
});

And comments:

The patch method cannot use callParent to call the superclass method since that would call the overridden method containing the bug. In other words, the above patch would only produce "Fixed" then "Good" in the console log, whereas, using callParent would produce "Fixed" then "Bad" then "Good"

Overriding Extjs classes and invoking callParent

2 Answers