`

Ext继承关系 讲解

    博客分类:
  • Ext
阅读更多

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继承分析

    在ExtJS中,`Ext.extend()` 是一个核心的函数,用于实现类之间的继承机制。它允许你创建新的类(子类...通过理解和熟练运用这个方法,开发者可以构建出具有强大继承关系的类结构,从而更好地管理和组织JavaScript代码。

    整理的Ext API详解

    文件中可能涵盖了Ext的应用程序启动、基本类的创建、继承机制、实例化过程以及如何自定义类等内容。学习这部分可以帮助开发者理解Ext如何组织代码和实现模块化。 接着,"EXT核心API详解(二)-Array Date Function ...

    Ext4.0中文版手册

    9. **EXT4 API**:标签“EXT4.0 API”表明手册会详细讲解与EXT4交互的编程接口,包括如何在程序中挂载、卸载、创建和管理EXT4文件系统,以及如何进行文件操作等。 脚本娃娃(Ext4.1.0 Doc中文版 V1.0.0 Beta)可能...

    Ext.js教程和Ext.js API

    1. **类结构**:列出所有可用的类,如Panel、Grid、Form等,以及它们之间的继承关系。 2. **类方法和属性**:每个类的构造函数、方法、属性、事件和配置选项的详细说明。 3. **示例代码**:为常见用法提供代码片段,...

    ext学习文档

    - **学习利用模板(Templates)的格式化功能**: 讲解了如何使用EXT的模板系统进行数据格式化。 #### 12. 事件处理 - **非常基础的例子**: 提供了一个简单的事件处理示例。 - **处理函数的作用域**: 讨论了事件处理...

    Ext3官方例子文档(最全)

    本篇文档将详细讲解Ext3文件系统的特性和使用案例,帮助用户更好地理解和应用这一重要的文件系统。 一、Ext3的基本结构 Ext3继承了Ext2的大部分设计,但引入了日志记录功能,使得系统崩溃后的恢复更加高效。它将...

    ext grid 显示数据

    在"LearningExtJS 第五章节的翻译"中,我们可以期待找到关于EXT JS Grid的详细讲解和实例应用。 EXT JS的Grid组件提供了丰富的功能,如分页、排序、过滤、编辑等,可以灵活地适应各种业务需求。以下是一些关于EXT ...

    EXT2.0 API文档

    组件是EXT的基本构建块,可以是按钮、表格、面板等,它们都继承自EXT的基础组件类。EXT提供了丰富的组件库,允许开发者创建复杂且交互性强的用户界面。布局管理器则负责在容器中安排这些组件,确保它们在不同屏幕...

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

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

    ext2.0中文帮助文档

    6. **可扩展性**:EXT2.0允许开发者通过继承和扩展已有组件来创建自定义组件,满足特定项目需求。 7. **主题支持**:EXT2.0支持更换皮肤和主题,可以通过修改CSS样式轻松改变应用程序的外观。 **EXT2.0中文文档...

    EXT-In-FirstStep

    - 深入讲解EXT的布局系统,包括常见的布局类型及其应用,如Border Layout、Card Layout等。 ### 高级主题 #### 8.1 表单组件入门 - 涵盖了EXT中表单组件的创建和使用,包括字段验证、数据绑定等高级特性。 #### ...

    EXT-js-中文手册

    - **继承机制**:EXT采用了面向对象的设计模式,支持类之间的继承关系,便于复用代码。 - **示例代码**:通过示例代码解释了如何在EXT中实现类的继承。 #### 20. 补充资料 - **参考资料**:提供了额外的学习资源,...

    ext开发人员ppt

    EXTJSClasses.ppt中可能涵盖了EXT如何通过类定义来构造复杂的组件结构,包括类的继承、配置选项、静态方法和属性等。EXT的类系统使得代码结构清晰,易于维护和扩展。 2. **事件(Event)** 在EXT中,事件是组件间...

    extgrid 封装

    本文将详细讲解关于"ext grid 封装"的知识点,以及如何通过`grid.js`来实现UI的便捷调用。 1. ExtJS Grid组件: - Grid组件是ExtJS的核心组件之一,用于显示表格数据,支持排序、分页、筛选等多种功能。 - 它由一...

    新版ext教程.pdf

    该文档主要围绕ext框架进行讲解,适合初学者以及有一定基础的开发者参考学习。下面将根据文档的描述与部分内容对其中涉及的关键知识点进行详细阐述。 #### 一、Ext框架简介 - **定义**:Ext框架是一种基于...

    ext ppt

    标题中的"ext ppt"指的是基于Ext JS框架的相关技术讲解PPT,这可能是一系列由核心开发人员制作的讲座或培训材料。这些PPT涵盖了Ext JS的几个关键组件和概念,如DOM操作、事件处理和类系统。 1. **DOM(Document ...

    Ext 实现自定义控件

    以下将详细讲解两种常见的自定义EXT控件的方法: 1. **重载 `initComponent` 函数** `initComponent` 是EXT JS组件生命周期中的一个重要函数,它在组件实例化时被调用,用于完成组件的基本配置和初始化。当需要...

Global site tag (gtag.js) - Google Analytics