ExtJS学习之路第三步:理解引擎之下,ExtJS4中的类
写写就发现,有些代码不查查源头,不明白是怎么回事?搜到这篇文章觉得还是收益匪浅,更容易读懂代码。
Classes in Ext JS 4: Under the hood
Countdown to Ext JS 4: Dynamic Loading and New Class System[官网]
整理如下:
简单回顾一下,新的Class System (类系统),使我们能够这样定义类:
Ext.define('Ext.Window', {
extend: 'Ext.Panel',
requires: 'Ext.Tool',
mixins: {
draggable: 'Ext.util.Draggable'
},
config: {
title: "Window Title"
}
});
这里,我们建立一个Ext.Window类的稍微简化版本。设置Window是Panel的子类,宣称需要Ext.Tool类,以及混合Ext.util.Draggable类的的某些功能。
让我们一句一句分析。'extend'声明你所期望的--Window必须是Panel的子类。
'requires'声明意味着命名类-Ext.Tool必须在Window类被视为可用之前[即将用]就已经存在。如果你用SeaJS的require话就明白时机啦,简单说就是Window要应用了,Ext.Tool必须在。
'mixins'这个在SASS(CSS预处理器)中有应用。在ExtJS4中,'minxin'(混合声明)是个全新的概念。一个mixin仅仅是一组函数(有时候是一组属性)被合并成到一个类中。比如,Ext.util.Draggable类中有个'startDragging'的功能,这就被复制到Window类中,我们能在Window的实例中应用'startDragging'功能。
定义startDragging方法:
Ext.define('Ext.util.Draggable', {
startDragging: function() {
console.log('started dragging');
}
});
实例化
var win = Ext.create('Ext.Window');
win.startDragging(); //"started dragging"
当一个类需要继承多个特性时,Minins就非常有用啦!而这对传统的单继承机制来说不易。例如,Ext.Windows是一个可拖动的组件,比如有Sliders,Grid headers和其他非常多的UI元素。因为这种动作发生在不同的地方,把这种拖拽行为归到单独一个父级类是不可行的。因为并非所有这些UI元素都以个共同的父级类。创建一个可团拽的Minxin解决了这个问题,仅需几行代码现在任何元素都可以变为可拖动的。
最后一个新的功能块,是'config'配置。ExtJS中的大多数类都需要配置参数,其中很多在运行时改变。上面的例子中,我们声明了Ext.Window有个'title'配置,默认值是'Window Title'。通过上面的这种设置,我们免费得到4种方法,getTtiel,setTitle,resetTitle,applyTitle.
getTitle – 返回当前title值
setTitle – 设置新的title
resetTitle – 重置title值,此处为'Window Title'
applyTitle – 这是一个模板方法,你可以选择定义。当setTitle触发的时候,applyTitle触发。
applyTitle功能是当title改变时,调用其它需要改动的逻辑。比如:当更换一个title的时候我们可能想更新某个DOM元素。
Ext.define(‘Ext.Window’, {
//..as above,
config: {
title: 'Window Title'
},
//updates the DOM element that contains the window title
applyTitle: function(newTitle) {
this.titleEl.update(newTitle);
}
});
这种方式节省了大量的时间和代码,同时提供所有configuration配置选项一致的API-双赢。
深入研究
为了实现这神奇的功能,ExtJS 4引入4个新类。
Ext.Base-所有的类都继承自Ext.Base.它为所有类提供基本的低级别的功能。
Ext.Class-产生新类的工厂。
Ext.ClassLoader-负责确认class可用,如果页面上不存在,加载他们。
Ext.ClassManager-揭开类创建的序幕和管理依赖关系
这些在幕后齐心协力,大部分时间当你定义和使用类的时候,你不需要知道什么被调用了。常用的两个方法是Ext.define和Ext.create,在引擎中都触发Ext.ClassManager,这反过来又利用其它三个类把一切融合在一起。
Ext.Class和Ext.Base的区别是非常重要的。Ext.Base是顶层的父类,它定义了每个类,每个类都继承自Ext.Base在某些时候。Ext.Class代表类本身,每一个你定义的类都是Ext.Class的实例,并且是Ext.Base的子类。
为了说明这一点,假设我们创建MyClass的类,它并不扩展其他类。
Ext.define('MyClass', {
someFunction: function() {
console.log('Ran some function');
}
});
MyClass的直接父类是Ext.Base,因为我们并没有扩展其他。
类的继承层次中,根始终是Ext.Base,也就是说每个类始终都是继承自Ext.Base.所以每个类是Ext.Base的子类,是Ext.Class的实例。这就意味着在之后很容易修改类,比如混合附加功能
//可以在定义类的时候就增加混合功能
Ext.define('MyClass', {
mixins: {
observable: 'Ext.util.Observable'
}
});
//也可以在类定义之后增加
MyClass.mixin('draggable', 'Ext.util.Draggable');
这种架构开辟了都动态创建类和元编程的新的可能性,这在早期版本是非常困难得。
ExtJS学习之路第三步:理解引擎之下,ExtJS4中的类的更多相关文章
- ExtJS学习之路第八步:Window组件
一个专门Panel用作程序窗口.默认的,Window可以是浮动的(floated).可缩放(resizable)以及可拖动的(draggable).Window能够被最大化适应可视窗口,(restor ...
- ExtJS学习之路第六步:深入讨论组件Panel用法
Panel加载页面 var myPanel=Ext.create('Ext.panel.Panel',{ bodyPadding: "15px 10px 0 10px", titl ...
- ExtJS学习之路第五步:认识最常见组件Panel
文档中描述 Panel(面板)是一个容器,它具有特定的功能和结构部件,这使它成为面向应用用户界面的完美基石.面板,继承自Ext.container.Container,能够配置布局以及子组件(Chil ...
- ExtJS学习之路第四步:看源码,实战MessageBox
可以通过看MessageBox.js的源码来深入认识,记住它的主要用法.Ext.MessageBox是实用类,用于生成不同风格的消息框,它是Singleton(单例),别名Ext.Msg.注意Mess ...
- ExtJS学习之路第七步:contentEl与renderTo的区别
上回在Panel的应用中我们应该能大致区分开conteEl和renderTo,这回我们从定义中区分. 在Panel的API中, contentEl:String指定一个现有的HTML元素或者id作为此 ...
- ExtJs 学习之开篇(三)Ext.grid.Panel表格中的处理
Ext.grid.Panel Ext.create('Ext.grid.Panel',{ title:'测试表格', width:400, height:20 ...
- [转]Spark学习之路 (三)Spark之RDD
Spark学习之路 (三)Spark之RDD https://www.cnblogs.com/qingyunzong/p/8899715.html 目录 一.RDD的概述 1.1 什么是RDD? ...
- 微软企业库5.0 学习之路——第六步、使用Validation模块进行服务器端数据验证
前端时间花了1个多星期的时间写了使用jQuery.Validate进行客户端验证,但是那仅仅是客户端的验证,在开发项目的过程中,客户端的信息永远是不可信的,所以我们还需要在服务器端进行服务器端的验证已 ...
- 微软企业库5.0 学习之路——第五步、介绍EntLib.Validation模块信息、验证器的实现层级及内置的各种验证器的使用方法——下篇
一.独立验证器 我上篇中我将AndCompositeValidator和OrCompositeValidator归为独立验证器,这2个验证器主要是为了第一类验证服务,可以进行多种验证组合在一起进行复杂 ...
随机推荐
- 《Linux内核设计与实现》课程学习重点问题总结
(问题均是同学提出或是老师上课重点讲解的部分内容,根据自身理解和笔记总结出自己的答案.如有不对,还请指教.) week2 [Q1]命令qemu -kernel 内核可执行文件 -initrd root ...
- Linux内核分析——第八周学习笔记20135308
第八周 进程的切换和系统的一般执行过程 一.进程切换的关键代码switch_to分析 1.进程调度与进程调度的时机分析 (1)进程分类 第一种分类 I/O-bound:等待I/O CPU-bound: ...
- 动画:UIKitAnimation 简单动画学习 iOS (一) 渐变 、 移动 、翻页、来回翻转 ——转载
转载请说明(谢谢) http://blog.csdn.net/a21064346/article/details/7851695 点击打开链接 以下 一个系列的 动画效果 在 UIView.h文件中可 ...
- Mac无法找到摄像头问题解决
facetime显示“未检测到摄像头”之类的,重启后可能摄像头有工作正常了,摄像头不稳定 重置 NVRAM后恢复正常,据说机器卡的时候,此法也可以使用. https://support.apple.c ...
- css基本的东西
0 css本来也是一个比较乱的东西,我们需要在最恰当的情况下,写出最杂乱的效果.1 面对body设置了 -webkit-font-smoothing:antialiased (默认值为subpixel ...
- u11-nav02
header:before, header:after ,.navigation:before, .navigation:after,.nav-row:before, .nav-row:after,. ...
- overlay-2
<script src="/jquery.js"></script><script type="text/javascript"& ...
- zabbix_agent安装(Centos+Ubuntu)
Centos安装 安装依赖包 yum -y install mysql-devel libcurl-devel net-snmp-devel 添加用户 groupadd zabbix use ...
- Java编程思想学习(八) 内部类
可以将一个类的定义放在另一个类的定义内部,这就是内部类. 内部类的定义是简单的,但是它的语法确实很是复杂,让人不是很好理解.下面就内部类做一个小结. 一.内部类的分类 总的来讲内部类分为普通内部类,匿 ...
- BZOJ4196 软件包管理器
Description Linux用户和OSX用户一定对软件包管理器不会陌生. 通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件源下载软件包,同时自动解决所有的依赖 ...