更好的方法来调用父类方法ExtJS的

Question

所有ExtJS的文档和例子我已阅读建议调用父类的方法是这样的：

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

我一直在使用这种模式相当长的一段时间，主要的问题是，当你重命名你的类时，你也必须改变所有对超类方法的调用。这很不方便，我经常会忘记，然后我必须找出奇怪的错误。

但阅读的Ext.extend()源，我发现，这不是我可以使用superclass()或super()方法是Ext.extend()增加了原形：

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

在这段代码中重命名MyPanel别的东西很简单 - 我只是必须改变一条线。

但我怀疑...

• 我还没有看到这个记录任何地方和旧的观念认为，我不应该依靠无证行为。

• 我没有在ExtJS源代码中找到这些superclass()和supr()方法的单个用法。为什么在你不使用它们时创建它们？

• 也许这些方法在某些旧版本的ExtJS中使用，但现在不推荐使用？但它似乎是一个非常有用的功能，为什么你会弃用它？

那么，我应该使用这些方法吗？

Answer 1

是的，supr()没有记录。我一直期待在ExtJS 3.0.0中使用它（一个Ext的工作人员在论坛中回复，他们已经在该版本中添加了它），但它似乎非常糟糕。

它目前没有遍历继承层次结构，而是上升一层，然后卡在这个层面上，无休止地循环并炸毁堆栈（IIRC）。所以，如果你连续有两个或更多的supr()，你的应用会中断。我在文档和论坛上都没有找到关于supr()的任何有用信息。

我不知道关于维护版本3.0.x的，因为我没有得到的支持许可证...

Answer 2

你可以使用这个鲜为人知的Javascript功能（arguments.callee的）：

MyApp.MyPanel = Ext.extend(Ext.Panel, { 
    constructor: function() { 
     // Do your thing 
     this.thing = 1; 

     // Call super 
     arguments.callee.superclass.constructor.apply(this, arguments); 
    } 
}); 

看到MDC documentation

编辑：其实，这是不会有initComponent的工作，因为它不是” t构造函数。我总是个人重写构造函数（尽管Ext JS示例提供了这些内容）。将继续考虑这一点。

Answer 3

下面是我用一个模式，一直想在博客了一会儿。

Ext.ns('MyApp.MyPanel'); 

MyApp.MyPanel = (function(){ 
    var $this = Ext.extend(Ext.Panel, { 
    constructor: function() { 
     // Using a 'public static' value from $this 
     // (a reference to the constructor) 
     // and calling a 'private static' method 
     this.thing = $this.STATIC_PROP + privateStatic(); 
     // Call super using $super that is defined after 
     // the call to Ext.extend 
     $super.constructor.apply(this, arguments); 
    }, 
    initComponent: function() { 
     $super.initComponent.call(this); 
     this.addEvents([Events.SOMETHING]); // missing docs here 
    } 
    }); 
    var $super = $this.superclass; 

    // This method can only be accessed from the class 
    // and has no access to 'this' 
    function privateStatic() { 
    return "Whatever"; 
    } 


    /** 
    * This is a private non-static member 
    * It must be called like getThing.call(this); 
    */ 
    function getThing() { 
    return this.thing; 
    } 

    // You can create public static properties like this 
    // refer to Events directly from the inside 
    // but from the outside somebody could also use it as 
    // MyApp.MyPanel.Events.SOMETHING 
    var Events = $this.Events = { 
     SOMETHING: 'something' 
    } 

    return $this; 
})(); 

MyApp.MyPanel.STATIC_STRING = 10; 

//Later somewhere 
var panel = new MyApp.Mypanel(); 
panel.on(MyApp.Mypanel.Events.SOMETHING, callback); 

有很多的功能，你使用这种模式，但你不必使用所有这些

Answer 4

我会简单地改变你的代码：

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

那方式你只保留一个你的类名称，现在$ cls的引用。只在你的类方法中使用$ cls，你会没事的。

Answer 5

我想出了这个解决方案在几个小时前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; 
} 

然后，你可以这样做：

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); 
    } 
}); 

测试只（铬8.0.552.237（70801） Ubuntu 10.10） 和（Firefox 3.6.13）。

希望这有助于某人，我几乎切换到GWT。

Answer 6

我认为这是用callParent在ExtJS 4中解决的。

Ext.define('My.own.A', { 
    constructor: function(test) { 
     alert(test); 
    } 
}); 

Ext.define('My.own.B', { 
    extend: 'My.own.A', 

    constructor: function(test) { 
     alert(test); 

     this.callParent([test + 1]); 
    } 
});