De meilleure façon de l'appeler super-classe de la méthode dans ExtJS

Question

Tous les ExtJS la documentation et les exemples que j'ai lu conseille d'appeler super-classe de méthodes comme ceci:

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

J'ai été en utilisant ce modèle pour un certain temps, et le principal problème est, que lorsque vous renommez votre classe puis vous avez aussi changer tous les appels aux méthodes de la superclasse. C'est assez gênant, souvent, j'oublie et puis je dois retrouver des erreurs étranges.

Mais la lecture de la source d' Ext.extend() j'ai découvert qu'à la place je pourrais utiliser l' superclass() ou super() méthodes Ext.extend() ajoute au prototype:

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

Dans ce code de renommer MyPanel à quelque chose d'autre est simple, j'ai juste à changer une ligne.

Mais j'ai des doutes...

• Je n'ai pas vu ce document n'importe où et de la vieille sagesse dit, je ne devrais pas compter sur les sans-papiers comportement.

• Je n'ai pas trouvé une seule utilisation de ces superclass() et supr() méthodes de ExtJS code source. Pourquoi créer lorsque vous n'allez pas les utiliser?

• Peut-être que ces méthodes ont été utilisées dans certaines anciennes version de ExtJS mais sont déconseillés maintenant? Mais il semble d'une telle fonctionnalité utile, pourquoi vous railler il?

Donc, dois-je utiliser ces méthodes ou pas?

Answer 1

Je pense que ce problème est résolu dans ExtJS 4 avec callParent.

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

Oui en effet, supr() n'est pas documenté. J'ai hâte de l'utiliser dans ExtJS 3.0.0 (un Poste de membre du personnel a répondu dans les forums, ils avaient ajouté dans cette version), mais il semble horriblement cassé.

Actuellement, il ne passe pas par la hiérarchie d'héritage, mais plutôt de monter d'un niveau, puis se coince à ce niveau, les boucles à l'infini et les coups de la pile (IIRC). Donc, si vous avez deux ou plus supr() dans une rangée, votre application va se casser. Je n'ai pas trouvé toutes les informations utiles sur supr() ni dans la doc ni dans les forums.

Je ne sais pas à propos de la version de maintenance 3.0.x, puisque je n'ai pas d'obtenir une licence d'assistance ...

Answer 3

Voici un modèle que j'utilise, et eu l'intention de blogue à ce sujet pendant un certain temps.

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

Il y a beaucoup de fonctionnalités que vous obtiendrez en utilisant ce modèle, mais vous n'avez pas à utiliser tous

Answer 4

Vous pouvez utiliser ce peu connu Javascript fonction (arguments.le destinataire de l'appel):

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

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

voir MDC documentation

Edit: en Fait, ce n'est pas d'aller travailler avec initComponent car il n'est pas le constructeur. J'ai toujours surcharger le constructeur, personnellement (en dépit de ce que Ext JS exemples suggèrent). Continuer à penser à ce un peu.

Answer 5

Je voudrais simplement changer votre code:

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

De cette façon, vous ne gardez une seule mention de votre nom de la classe, maintenant $cls. Utilisez seulement $cls dans votre classe, méthodes et vous serez amende.