`
weitd
  • 浏览: 143399 次
  • 性别: Icon_minigender_1
  • 来自: 新都
社区版块
存档分类
最新评论

Ext中extend继承

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

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

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

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的坐标值指定了对象可在垂直、水平方向拖动的距离。

// 创建新类的构造函数
Ext.ResizableConstrained = function(el, config){
    Ext.ResizableConstrained.superclass.constructor.call(this, el, config);
};

// 扩展基类
Ext.extend(Ext.ResizableConstrained, Ext.Resizable, {
    setXConstraint : function(left, right){
        // 得到父类的属性dd和setXConstraint的引用
        this.dd.setXConstraint(left, right);
    },

   setYConstraint : function(up, down){
     // 得到父类的属性dd和setYConstraint的引用
     this.dd.setYConstraint(up, down);
   }
});

// 创建新类的实例
var myResizable = new Ext.ResizableConstrained('resize-el', {
   width: 200,
   height: 75,
   minWidth:100,
   minHeight:50,
   maxHeight:150,
   draggable:true
});

//调用新方法
myResizable.setYConstraint(0,300);
myResizable.setXConstraint(0,300);

如果解释成通俗易懂的话来说,上面的代码就可理解成为:”Ext.ResizableConstrained 扩展了Ext.Resizable并实现了这些方法"。

转http://www.extjs.com/learn/Manual:Intro:Inheritance_%28Chinese%29
分享到:
评论

相关推荐

    Ext_Extend 用法及解读

    `Ext.extend`是Ext JS库中的一个核心方法,用于实现类的继承机制。在JavaScript中,由于语言本身没有内置的类概念,所以通常通过原型链(prototype)来模拟类的继承。`Ext.extend`就是这样一个工具,它使得创建类的...

    ext 继承(extend) 理解练习

    这里,我们聚焦于`ext`继承,通常指的是JavaScript中的`extend`方法,这是一种实现继承的方式。在JavaScript中,由于语言本身没有内置的类机制,所以开发者通过函数和原型链来模拟类的概念。 `extend`方法通常被...

    Ext继承分析

    在ExtJS中,`Ext.extend()` 是一个核心的函数,用于实现类之间的继承机制。它允许你创建新的类(子类),这些类将继承另一个类(父类)的属性和方法。这个功能对于构建复杂的JavaScript应用程序至关重要,因为它提供...

    Ext继承和扩展

    然而,`Ext`库提供了一个更优雅、更易于理解和维护的方式来处理继承,这包括`Ext.extend()`方法和`Ext.create()`函数。 ### `Ext.extend()` `Ext.extend()`是`Ext`库中用于创建子类的核心方法。它接受三个参数:...

    ext继承重写

    EXT JS中的“extend”关键字是实现继承的关键。当你创建一个新的类并声明它`extend`另一个类时,新类将自动获取父类的所有属性和方法。这使得我们可以基于已有的基础类构建更复杂的组件或功能,无需从头开始编写代码...

    ext面向对象和继承

    EXTJS中的继承是通过`Ext.extend()`或`Ext.createByAlias()`实现的。继承允许子类重写或扩展父类的方法和属性。例如,我们可以创建一个新的按钮类,继承自EXTJS的`Ext.button.Button`: ```javascript MyButton = ...

    EXT dojochina Ext类继承.rar

    1. **Ext.extend()**:这是EXTJS中最基础的类继承方法。通过调用`Ext.extend(baseClass, subClass, overrides)`,可以创建一个新的子类,其中`baseClass`是父类,`subClass`是新创建的子类名称,`overrides`是一个...

    Extjs中使用extend(js继承) 的代码

    在Ext JS框架中,Ext.extend是用来实现JavaScript继承的一种方法。Ext JS是一个用于开发富交互式的Web应用程序的框架,它封装了复杂的DOM操作,提供了一套丰富的UI组件。在使用Ext JS开发时,使用Ext.extend可以创建...

    ExtJS的extend(Ext Designer的使用)

    总结来说,`extend`是Ext JS中构建组件和类继承结构的核心机制,而Ext Designer通过提供可视化界面,使开发者能够更加直观地理解和利用这一机制。通过`extend`,我们可以创建出符合特定需求的自定义组件,同时保持...

    Ext一些方法的重写

    `Ext.extend()` 是`Ext`库中的一个核心函数,它用于创建类的继承链。在JavaScript这种没有类的语言中,`Ext.extend()` 提供了面向对象编程的模拟。当我们想要自定义一个新类,并希望它继承自另一个已有类时,可以...

    Ext继承和扩展写的例子。

    在这个特定的例子中,我们关注的是"Ext继承和扩展",这是Ext JS中两个核心的概念,它们对于理解和创建自定义组件至关重要。 1. **Ext继承**: 在面向对象编程中,继承是类之间的一种关系,允许一个类(子类或派生...

    EXT dojochina Ext类静态方法.rar

    例如,`Ext.extend(MyClass, Ext.Panel, {myMethod: function() {...}})`创建了一个新类MyClass,它继承自Ext.Panel,并添加了一个名为myMethod的方法。 - `Ext.apply()`: 这个静态方法用于合并对象的属性,通常...

    无废话ExtJs 系列教程十八[继承:Extend]

    继承在ExtJS中的实现主要基于`Ext.extend()`方法,这个方法是ExtJS提供的一个静态方法,它允许一个类(子类)继承另一个类(父类)的所有属性和方法。通过`Ext.extend()`,我们可以定义新的类,同时保留和扩展已存在...

    Ext.Store的获取方法

    但在使用`extend`进行类继承时,可能会将Store的定义放在一个新的组件内,例如一个ComboBox: ```javascript Leangle.form.combo.ColorComboBox = Ext.extend(Leangle.form.BaseComboBox, { // ComboBox ...

    在EXT中使用FCKEditor编辑器例子

    2. **创建EXT组件**:编写一个EXT组件类,这个类会利用`Ext.extend()`方法扩展EXT的基础组件,如`Ext.Component`。在这个类中,你需要定义FCKEditor的配置项,如宽度、高度、工具栏设置等。 3. **渲染FCKEditor**:...

    ext中播放声音

    首先,定义一个类,继承自EXTJS的`Ext.container.Container`,并在`renderTpl`配置项中添加`<audio>`标签。然后,为`<audio>`元素添加`src`属性,用于指定音频文件路径。例如: ```javascript Ext.define('...

    ext api,ext 学习笔记,SWFUpload_多文件上传及部分工具

    EXT的extend函数是实现类继承的关键,通过它,可以创建新的组件类并继承已有组件的属性和方法。JavaScript对象的理解则有助于更好地利用EXT的动态性。 "spket-1.6.11.jar"可能是一个开发工具,如Spket IDE,它提供...

    EXT中FCK的使用

    这通常涉及到继承EXT的基础组件类,然后在`render`方法中初始化FCKeditor实例。代码可能类似于: ```javascript Ext.extend(MyFCKComponent, Ext.Component, { initComponent: function() { this....

    EXtJS学习 EXtJS学习

    EXTJS 学习:深入理解 `Ext.extend` 及其在继承中的陷阱 EXTJS 是一个强大的 JavaScript 框架,用于构建富客户端应用程序。它提供了丰富的组件库和强大的数据绑定机制。在 EXTJS 中,`Ext.extend` 是核心的继承机制...

Global site tag (gtag.js) - Google Analytics