From Learn About the Ext JavaScript Library

Ext met à disposition une fonction appelée Ext.extend (API reference) qui permet d'implémenter l'héritage dans le framework Ext. Elle vous permet donc de modifier ou d'étendre les fonctionnalités de base de n'importe quelle classe JavaScript sans modifier directement le code dans la classe elle-même. C'est la méthode à utiliser pour étendre les composants Ext.

Pour créer une nouvelle classe qui hérite d'une classe existante, vous devez déjà déclarer le nouveau constructeur via une fonction, puis invoquer la méthode extend pour définir les attributs partagés de votre nouvelle classe. Ces attributs partagés sont généralement des méthodes, mais si des données doivent être partagées entre vos différentes instances (i.e., comme une variable static de classe en Java), elles doivent aussi être déclarées ici.

JavaScript ne fournit pas de mécanisme pour invoquer automatiquement le constructeur parent, vous devez donc alors l'appeler explicitement dans votre constructeur en utilisant la propriété superclass. Le premier argument doit toujours être this pour assurer que le constructeur est exécuté avec le même périmètre que la fonction appelante.

MyNewClass = function(arg1, arg2, etc) {
   // explicitly call the superclass constructor
   MyNewClass.superclass.constructor.call(this, arg1, arg2, etc); 
};
 
Ext.extend(MyNewClass, SomeBaseClass, {
  theDocument: Ext.get(document),
  myNewFn1: function() {
    // etc.
  },
  myNewFn2: function() {
   // etc.
  }
});

L'exemple suivant est une extension d'Ext qui permet de redimensionner, ou déplacer un élément qui doit être contraint par un couple X et Y de valeurs qui précisent dans quelle mesure l'objet peut être glissé dans le sens horizontal et/ou vertical.

// create constructor for new class
Ext.ResizableConstrained = function(el, config){
    Ext.ResizableConstrained.superclass.constructor.call(this, el, config);
};
 
// extend the base class
Ext.extend(Ext.ResizableConstrained, Ext.Resizable, {
    setXConstraint : function(left, right){
        // Obtain a reference to parent dd property and setXConstraint
        this.dd.setXConstraint(left, right);
    },
 
   setYConstraint : function(up, down){
     // Obtain a reference to parent dd property and setYConstraint
     this.dd.setYConstraint(up, down);
   }
});
 
// create an instance of the new class
var myResizable = new Ext.ResizableConstrained('resize-el', {
   width: 200,
   height: 75,
   minWidth:100,
   minHeight:50, 
   maxHeight:150, 
   draggable:true
});
 
// invoke the new methods
myResizable.setYConstraint(0,300);
myResizable.setXConstraint(0,300);

En d'autres termes, vous pouvez comprendre le code ci-dessus par : "Ext.ResizableConstrained étend Ext.Resizable, et implémente ces méthodes..."

Appel d'une méthode de la classe parente

Si vous avez besoin d'étendre une méthode mais d'appeler la même méthode de la classe parente, vous pouvez faire comme ceci :

MyClass = Ext.extend(Ext.SomeClass, {
    someFunction : function(arg1, arg2){
         // custom code
 
         // call base class
         MyClass.superclass.someFunction.call(this, arg1, arg2);
 
         // custom code
    }
);