Ext inheritance machnism

最新推荐文章于 2025-07-23 15:26:43 发布

chz20072008

最新推荐文章于 2025-07-23 15:26:43 发布

阅读量148

点赞数

分类专栏： Ext 文章标签： EXT JavaScript UP ViewUI

Ext 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了如何使用 ExtJS 框架提供的继承机制来扩展和修改 JavaScript 类的功能，而不直接更改原始类代码。通过示例展示了如何创建继承自现有类的新类，并提供了调用基类方法的方法。

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"