在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

我认为这是使用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]);
    }
});

Answer 2

是的,确实supr()没有记录.我一直期待在ExtJS 3.0.0中使用它(一个Ext工作人员在论坛中回复,他们已经在该版本中添加了它),但它看起来非常糟糕.

它目前不会遍历继承层次结构,而是上升到一个级别,然后卡在这个级别上,无休止地循环并炸毁堆栈(IIRC).因此,如果您supr()连续两个或更多,您的应用程序将会中断.我supr()在文档和论坛中都没有找到任何有用的信息.

我不知道维护版本3.0.x,因为我没有获得支持许可证...

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

使用此模式可以获得许多功能,但您不必使用所有这些功能