Ext inheritance machnism

Ext provides a utility function called Ext.extend (API reference) that is the mechanism for implementing class inheritance using the Ext framework. This gives you the ability to modify or extend the base functionality of any JavaScript class without making code changes directly to the class itself (this is also commonly referred to as subclassing, or inheriting from, a base class). It is the preferred method for extending Ext components.

To create a new class that inherits from an existing class, you first declare the new class constructor via a function, and then invoke the extend method to define the shared attributes of your new class. These shared attributes are generally methods, but if a data item may be shared between instances (i.e., similar to a static class variable in Java), it may be declared there too.

JavaScript does not provide a mechanism for automatic invocation of super class constructors, so you must call the super class explicitly from your constructor using the superclass property. The first argument should always be this to ensure that the constructor is executed with the scope of the calling function.

 

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

 

The following example is a real world extension to Ext to allow a resizable, draggable element to be constrained by a set of X, Y values that specify how far the object can be dragged in the horizontal and/or vertical planes.

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

 

In English terms, you could read the above code generally as the following: "Ext.ResizableConstrained extends Ext.Resizable, and implements these methods..."

Calling a base class method

If you need to override a method but call the same method of the superclass you can do this as below:

 

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

 

Don't forget to pass this or it won't run in your object context.

Retrieved from "http://extjs.com/learn/Manual:Intro:Inheritance"