[转]Ext继承关系 讲解

Ext提供了这样的一个实用函数 Ext.extend (API 参考) 在EXT框架中实现类继承的机制。这赋予了你扩展任何JavaScript基类的能力，而无须对类自身进行代码的修改（这里通常指的是子类，或是从它继承的，一个基类）扩展Ext组件这是个较理想的方法。

要从一个现有的类创建出一个新类，首先要通过一个函数声明新类的构造器，然后调用新类属性所共享的扩展方法。这些共享的属性通常是方法，但是如果要在实例之间共享数据（例如，Java中的静态类变量），应该也一同声明。

JavsScript并没有提供一个自动的调用父类构造器的机制，所以你必须通过属性superclass在你的构造器中显式调用父类。第一个参数总是this，以保证构造器工作在调用函数的作用域。

 

Js代码

1. MyNewClass = function(arg1, arg2, etc) {   
2.    // 显式调用父类的构造函数   
3.    MyNewClass.superclass.constructor.call(this, arg1, arg2, etc);    
4. };   
5.     
6. Ext.extend(MyNewClass, SomeBaseClass, {   
7.   theDocument: Ext.get(document),   
8.   myNewFn1: function() {   
9.     // etc.   
10.   },   
11.   myNewFn2: function() {   
12.    // etc.   
13.   }   
14. });  

MyNewClass = function(arg1, arg2, etc) {
   // 显式调用父类的构造函数
   MyNewClass.superclass.constructor.call(this, arg1, arg2, etc); 
};
 
Ext.extend(MyNewClass, SomeBaseClass, {
  theDocument: Ext.get(document),
  myNewFn1: function() {
    // etc.
  },
  myNewFn2: function() {
   // etc.
  }
});

 

 下面的一个例子是Ext的实际案例，用于可缩放，拖动元素，X、Y的坐标值指定了对象可在垂直、水平方向拖动的距离。

 

Js代码

1. // 创建新类的构造函数   
2. Ext.ResizableConstrained = function(el, config){   
3.     Ext.ResizableConstrained.superclass.constructor.call(this, el, config);   
4. };   
5.     
6. // 扩展基类   
7. Ext.extend(Ext.ResizableConstrained, Ext.Resizable, {   
8.     setXConstraint : function(left, right){   
9.         // 得到父类的属性dd和setXConstraint的引用   
10.         this.dd.setXConstraint(left, right);   
11.     },   
12.     
13.    setYConstraint : function(up, down){   
14.      // 得到父类的属性dd和setYConstraint的引用   
15.      this.dd.setYConstraint(up, down);   
16.    }   
17. });   
18.     
19. // 创建新类的实例   
20. var myResizable = new Ext.ResizableConstrained('resize-el', {   
21.    width: 200,   
22.    height: 75,   
23.    minWidth:100,   
24.    minHeight:50,    
25.    maxHeight:150,    
26.    draggable:true  
27. });   
28.     
29. //调用新方法   
30. myResizable.setYConstraint(0,300);   
31. myResizable.setXConstraint(0,300);  

 

from Ext继承关系 讲解