Ext.extend not reaching right constructor
July 4th, 2009
I'm getting into a strange issue with Ext.extend when I use extend two levels deep. The topmost class loses reference to it's base's constructor and I can't figure out why/how. Here's a simple test case:
Ext.ns('FW.BaseObj', 'FW.Widgets.BaseObj');
FW.BaseObj = function() {}
FW.Widgets.BaseObj = function() {
FW.Pages.BaseObj.superclass.constructor.call(this) ;
}
Ext.extend(FW.Widgets.BaseObj, FW.BaseObj);
FW.Widgets.BaseObj.prototype._my_function = function() {
console.log('in _my_function');
}
WidgetsInterface={};
for(var k in FW.Widgets.BaseObj.prototype) {
var f = FW.Widgets.BaseObj.prototype[k];
if(typeof f == 'function') {
WidgetsInterface[k] = f;
}
}
function a() {
console.log("IN A");
a.superclass.constructor.call(this);
}
Ext.extend(a, Ext.grid.GridPanel);
function b() {
console.log("IN B");
b.superclass.constructor.call(this);
}
Ext.extend(b,a, WidgetsInterface);
function c() {
console.log("in C");
c.superclass.constructor.call(this);
}
Ext.extend(c,b);
console.log(c.superclass.constructor); // <-- This prints 'function()' instead of 'b' !!!
So, trying to access c.superclass.constructor on the last line shows a reference to the function 'FW.Widgets.BaseObj' instead of 'b()' as one would expect.
If you change the line 'Ext.extend(b,a, WidgetsInterface);' to 'Ext.extend(b,a);' , everything seems ok (ie, c.superclass.constructor is shown as 'b').
If you must ask, WidgetsInterface is a sort of Mixin that I'm trying to inject into 'b()'.
Can someone please point out the mistake in my understanding .
Thanks
Ext.ns('FW.BaseObj', 'FW.Widgets.BaseObj');
FW.BaseObj = function() {}
FW.Widgets.BaseObj = function() {
FW.Widgets.BaseObj.superclass.constructor.call(thi s);
}
Ext.extend(FW.Widgets.BaseObj, FW.BaseObj);
FW.Widgets.BaseObj.prototype._my_function = function() {
console.log('in _my_function');
}
WidgetsInterface={};
for(var k in FW.Widgets.BaseObj.prototype) {
var f = FW.Widgets.BaseObj.prototype[k];
if(typeof f == 'function' ) {
console.info(f);
WidgetsInterface[k] = f;
}
}
function a() {
console.log("IN A");
a.superclass.constructor.call(this);
}
Ext.extend(a, Ext.grid.GridPanel);
function b() {
console.log("IN B");
b.superclass.constructor.call(this);
}
Ext.extend(b,a, WidgetsInterface);// WidgetsInterface.constructor overrides a.constructor here!
function c() {
console.log("in C");
c.superclass.constructor.call(this);
}
console.info(WidgetsInterface.constructor); // shows function
Ext.extend(c,b);
new c()
Works as expected if you don't override the constructor.
Ext.ns('FW.BaseObj', 'FW.Widgets.BaseObj');
FW.BaseObj = function() {}
FW.Widgets.BaseObj = function() {
FW.Widgets.BaseObj.superclass.constructor.call(thi s);
}
Ext.extend(FW.Widgets.BaseObj, FW.BaseObj);
FW.Widgets.BaseObj.prototype._my_function = function() {
console.log('in _my_function');
}
WidgetsInterface={};
for(var k in FW.Widgets.BaseObj.prototype) {
var f = FW.Widgets.BaseObj.prototype[k];
if(typeof f == 'function' ) {
console.info(f);
WidgetsInterface[k] = f;
}
}
/**
Delete the constructor method
**/
delete WidgetsInterface.constructor;
function a() {
console.log("IN A");
a.superclass.constructor.call(this);
}
Ext.extend(a, Ext.grid.GridPanel);
function b() {
console.log("IN B");
b.superclass.constructor.call(this);
}
Ext.extend(b,a,WidgetsInterface);
function c() {
console.log("in C");
c.superclass.constructor.call(this);
}
Ext.extend(c,b);
new c() // works as expected.
#If you have any other info about this subject , Please add it free.# |
