透视Ext JS 4类背后的机制与特点(中)

配置项config

最后要说明的是“config”配置项对象。配置项对象就是Ext组件的参数,它以对象的key/value形式出现。大多数的配置项可以在运行时作改变。上面的例子中,我们声明了Ext.Windows的“title”配置项,默认值为“Window
Title”。设置类的期间就会有这四个方法给我们: getTitle(),setTitle(),resetTitle()和applyTitle()。

  • getTitle

    – 返回当前标题。

  • setTitle

    – 设置新的标题。

  • resetTitle

    – 恢复标题的默认值(“Window Title”)

  • applyTitle

    – 这是一个你可以定义的模板方法。当执行setTitle时就会执行。

也就说,当改变标题的时候随之就会执行applyTitle方法。例如我们想更新标题的DOM元素如下。

Ext.define(‘Ext.Window’, {
//..如上,
config: {
title: 'Window Title'
},
// 更新标题其所在的DOM innerHTML。
applyTitle: function(newTitle) {
this.titleEl.update(newTitle);
}
});

这一切都是自动化的,节省了编码时间之余还带来可维护性的提高。

tips:若不能读取配置项,可在构造器中执行:Ext.Base.initConfig()。

走近点去看

以上这些多态、静态项、配置项getter/setter都不是魔法,却给基于Prototype OO相对简单的JavaScript带来神奇般的效果,原因在于:

  • Ext.Base

    – 任何一个类都会继承的Ext.Base。它是居于最底层的一个类。

  • Ext.Class

    – 创建新的类工厂。

  • Ext.ClassLoader

    – 加载器用于保证页面上找不到类所进行的工作。

  • Ext.ClassManager

    –启动类的创建过程和管理依赖关系。

所列对象都是幕后的功臣,它们为你定义和使用某一个类都作出自己应有的贡献,而你却不一定要全部知晓它们内部细节怎么样,懂得如何运用即可。但是对于充满好奇心的俺们怎能够满足于此呢?还是让在下为我们揭开魔法的奥秘吧!其实,你常所用的两个函数
Ext.define和Ext.create不约而同地都来自Ext.ClassManager的方法,而背后的思路,就是利用其他三个类来综合打造你所写的类。

要注意Ext.Class和Ext.Base之间的区别才能搞清楚问题。Ext.Base是为每一个类而设的最顶层超类,换言之,每一个类都继承于Ext.Base(所有类的抽象类)。Ext.Class就只是一个单独意义上的类(仅为类本身所服务。可认为类的类),每一个类对象都是
Ext.Class的实例,当然,还是Ext.Base的子类(Ext.Class的超类有Ext.Base)。为说明清楚,我们创建一个最简单的类。没有继承其他类。

Ext.define( 'MyClass' , {
someFunction: function () {
console.log( 'Ran some function' );
}
});

因为没有继承其他类,所以MyClass的基类就是Ext.Base。我们可以透过一个树状的关系图来认识上述的关系。

该树状图由上至下演示了类的整个继承结构,根对象就是Ext.Base,每一个类都继承于Ext.Base,所以说,图中所指的全部对象,它既是Ext.Base的子类,又为Ext.Class的实例。类本身也是一种对象,其类型就是Ext.Classs,故所以对类这个对象我们还可以接着修改之,例如为MyClass加入Observable功能。

// 这里我先声明了多态observable,
Ext.define('MyClass', {
mixins: {
observable: 'Ext.util.Observable'
}
});
// 然后,在其他地方,还可以继续的对MyClass添加新功能
MyClass.mixin('draggable', 'Ext.util.Draggable');

 

可以说,动态类就是这么生成的了。该技术点在旧版本中难以实现的,现在却可以轻松做到,甚至元数据的编程。

在透视Ext JS 4类背后的机制与特点(下),我们对构成Ext类元素作更深入的分解,值得大家留意!

时间: 2024-07-30 16:04:09

透视Ext JS 4类背后的机制与特点(中)的相关文章

透视Ext JS 4类背后的机制与特点(下)

在构建 Ext.Class 之时,它会分配既细又专的处理器(processors),专门处理构成类定义的每一个部分.当前Ext缺省提供了一些处理器,包括有:mixins 多态的,配置项函数的,以及处理类扩展的都是必备的.除了缺省处理器外,还可以随便自定义预处理器,预处理器是完全交给开发者可控的.因为通过分解类处理单元,就可以达到了扩展性的目的,以便允许我们针对不同的场景,去制定更合适的处理器从而满足需求(具体组装的过程可仿照下面介绍的 static 处理器举一反三). 一图胜千言,下图即官方所出

Ext JS 4的倒数:动态加载和新的类机制 Count down to Ext JS 4: Dynamic Loading and New Class System (上)

Ext JS 4的倒数:动态加载和新的类机制 Count down to Ext JS 4: Dynamic Loading and New Class System (上)   January 19, 2011 by Ed Spencer 翻译 Ext中文网(ajaxjs.com) Frank http://www.sencha.com/blog/2011/01/19/countdown-to-ext-js-4-dynamic-loading-and-new-class-system/ Ext

《Ext JS实战》——1.3 框架概览

1.3 框架概览 Ext JS作为一个框架,不仅提供了UI部件,还提供了许多其他特性.这些内容可以分成6大部分,即Ext JS核心.UI组件.Web远程调用.数据服务.拖放以及通用工具.图1-4说明了这6个部分. 图1-4 Ext JS的6大部分,即Ext JS核心.UI组件.Web远程调用.数据服务.拖放及通用工具 了解这6大部分之间的区别以及各自的用途,有助于开发应用程序时划分边界,因此下面先讨论这6个部分. Ext JS核心 第一个功能集就是Ext JS核心,这一部分包括了许多基本功能,包

《Ext JS权威指南》——1.4节Ext JS的开发工具的获取、安装与配置介绍

1.4 Ext JS的开发工具的获取.安装与配置介绍 1.4.1 Ext DesignerExt Designer是一个所见即所得的创建Ext JS界面的工具软件,目前版本是1.2版,支持Ext JS 3.x和4.x版本,可在http://www.sencha.com/products/designer/download/下载试用版本. 安装双击下载文件将看到如图1-6所示的语言选择窗口. 选择简体中文后,单击"OK"按钮后将看到如图1-7所示的设定窗口. 单击"前进&quo

《Ext JS实战》——1.5 下载并配置

1.5 下载并配置 尽管下载Ext JS的过程简单,可配置一个使用Ext JS的页面却不像在HTML中引用一个文件那么简单.除了配置之外,还得了解目录的层级关系,要知道都有哪些目录以及它们的用途. 我们要做的第一件事就是得到源代码. 下载的SDK是个ZIP文件,差不多有6MB大小.后面会解释为什么这些文件会这么大.现在,把这个文件解压到一个用于专门保存JavaScript的地方.要使用Ajax,需要有一个Web服务器.我在自己的计算机上一般会配置一个本地的Apache,它是个免费的而且跨平台的W

《Ext JS实战》——2.2 Ext.Element类

2.2 Ext.Element类 所有使用了JavaScript的Web应用程序都会围绕着一个核心,也就是HTML的Element.JavaScript对DOM节点的访问能力让我们能够随意.灵活地操作DOM,包括增加.删除.美化或者修改文档中的任意节点内容.通过ID引用一个DOM节点的传统方法是: 这个getElementById方法很好用,可以执行一些类似改变innerHTML的内容,或者美化和配置一个CSS类这样的基本任务.不过要是想对该节点做更多的事情,例如管理它的事件,在有鼠标点击时应用

Ext JS 4官方文档之三 -- 类体系概述与实践_基础知识

Ext JS 4从底层对类体系进行了重构,这是Ext JS历史上的第一次对类体系的巨大重构.新的架构几乎被应用到每一个Ext JS 4的类中,所以希望您在开始编码前能对它有一定的了解,这是非常重要的. 这篇手册适用于任何想创建新类或者继承Ext JS 4中现存类的开发人员,分为4部分: 第一部分: "概述" -- 解释了创建一个强健的类体系的必要性 第二部分: "命名规范" -- 讨论了对类.方法.属性.变量和文件的最佳命名规范 第三部分: "实践&quo

《Ext JS 4 First Look》翻译之一:新特性

第一章 新特性   Extjs 4相对于之前的版本作出了重大的修正.其中包括全新的类系统.新平台的引入.API的修整和加强还有新组件的引入(如新的图表和图形组件).Extjs 4提供更快速.更稳定的用户体验,并且让开发人员更容易上手. 在本章我们将学习到下列内容: 1.1. 入手Extjs 4 1.1.1. 包和命名空间的改进 1.1.2. API文档的使用(日后经常和它打交道) 1.2. Extjs新平台的架构 1.3.  Extjs 4的类系统 1.3.1. 类定义与对象实例化 1.3.2

《Ext JS实战》——第1章 独特的框架 1.1 认识Ext JS

第一部分 Ext JS介绍 欢迎阅读<Ext JS实战>,本书是对Ext JS世界的深度之旅.在本书中,不仅要学习如何利用Ext JS框架完成各种任务,还会学习构成框架的各种组件和部件之间的差异. 通过第1章到第3章的学习,我们能够对框架的基础部分有必要的理解.我们的旅途从第1章正式起航,在第1章会学习框架的基础知识.第2章是"热身"章,会了解一些能让应用程序正确运行的关键要素.第3章会涉及框架的一些内部机制,例如组件模型和容器模型. 学完这一部分后,就可以探索Ext JS