Better way to call superclass method in ExtJS

user_15982 0
Viewed 41003

All the ExtJS documentation and examples I have read suggest calling superclass methods like this:

MyApp.MyPanel = Ext.extend(Ext.Panel, {
  initComponent: function() {
    // do something MyPanel specific here...
    MyApp.MyPanel.superclass.initComponent.call(this);
  }
});

I have been using this pattern for quite some time and the main problem is, that when you rename your class then you also have to change all the calls to superclass methods. That's quite inconvenient, often I will forget and then I have to track down strange errors.

But reading the source of Ext.extend() I discovered, that instead I could use the superclass() or super() methods that Ext.extend() adds to the prototype:

MyApp.MyPanel = Ext.extend(Ext.Panel, {
  initComponent: function() {
    // do something MyPanel specific here...
    this.superclass().initComponent.call(this);
  }
});

In this code renaming MyPanel to something else is simple - I just have to change the one line.

But I have doubts...

  • I haven't seen this documented anywhere and the old wisdom says, I shouldn't rely on undocumented behaviour.

  • I didn't found a single use of these superclass() and supr() methods in ExtJS source code. Why create them when you aren't going to use them?

  • Maybe these methods were used in some older version of ExtJS but are deprecated now? But it seems such a useful feature, why would you deprecate it?

So, should I use these methods or not?

extjs3 extend superclass extjs javascript
6 Answers

I would simply change your code to:

var $cls = MyApp.MyPanel = Ext.extend(Ext.Panel, {
  initComponent: function() {
    // do something MyPanel specific here...
    $cls.superclass.initComponent.call(this);
  }
});

That way you only keep a single reference of your class name, now $cls. Only use $cls within your class methods and you'll be fine.

user_251520

I've came up with this solution a couple hours ago heheh... 

function extend (parentObj, childObj) {
    parentObj = parentObj || function () {};

    var newObj = function () {
        if (typeof this.initialize == 'function') {
            this.initialize.apply(this, arguments);
        }
    }

    newObj.prototype.__proto__ = parentObj.prototype;

    for (var property in childObj) {
        newObj.prototype[property] = childObj[property];
    }

    newObj.prototype.superclass = function (method) { 
        var callerMethod = arguments.callee.caller,
            currentProto = this.constructor.prototype.__proto__;

        while (callerMethod == currentProto[method]) {
            currentProto = currentProto.__proto__;
        } 

        return currentProto[method]; 
    };

    return newObj;
}

Then you can do:

var A = function () { 
    this.name = "A Function!";
};

A.prototype.initialize = function () {
    alert(this.name);
}

var B = extend(A, {
    initialize: function () {
        this.name = "B Function!";
        this.superclass('initialize').apply(this);
    }
});

var C = extend(B, {
    initialize: function () {
        this.superclass('initialize').apply(this);
    }
});

Tested only with (Chromium 8.0.552.237 (70801) Ubuntu 10.10) and (Firefox 3.6.13).

Hope this help someone, I was almost switching to GWT.

user_5868100
Related