ExtJS6.2 开发指南
目录
2.1
2.2
2.3
3.1
3.2
4.1
4.2
4.3
4.4
1 代码规范............................................................................................................................ 6
2 类系统................................................................................................................................ 7
类的声明..............................................................................................................7
配置......................................................................................................................8
静态方法........................................................................................................... 10
3 布局和容器...................................................................................................................... 11
容器 Container.................................................................................................. 11
布局................................................................................................................... 12
3.2.1 使用布局........................................................................................................... 12
3.2.2 工作原理........................................................................................................... 13
4 组件.................................................................................................................................. 14
组件层级树....................................................................................................... 14
xtype 和延迟初始化..........................................................................................15
浮动组件........................................................................................................... 16
创建自定义组件............................................................................................... 17
4.4.1 组合还是继承................................................................................................... 17
4.4.2 模板方法........................................................................................................... 17
4.4.3 扩展哪个类....................................................................................................... 19
5 数据包.............................................................................................................................. 22
Model.................................................................................................................22
5.1.1 创建 Model........................................................................................................23
Store...................................................................................................................23
Validation...........................................................................................................25
6 事件.................................................................................................................................. 26
什么是 Event..................................................................................................... 26
监听 Event......................................................................................................... 27
后续添加监听事件监听器............................................................................... 28
删除监听器....................................................................................................... 28
scope 选项.........................................................................................................29
6.1
6.2
6.3
6.4
6.5
5.1
5.2
5.3
6.6
6.7
6.8
6.9
7.1
7.2
7.3
7.4
7.5
7.6
只监听一次事件............................................................................................... 30
使用缓存........................................................................................................... 30
触发自定义事件............................................................................................... 31
监听 DOM 事件.................................................................................................31
7 内存泄露.......................................................................................................................... 32
阻止基类清理工作........................................................................................... 32
没有清除 DOM 的监听器.................................................................................32
保持对象的引用............................................................................................... 33
持续创建有副作用的实例............................................................................... 34
清除任何在缓存中的注册............................................................................... 35
小结................................................................................................................... 35
8 定义应用外观.................................................................................................................. 35
制作主题........................................................................................................... 35
8.1.1 准备工作........................................................................................................... 35
8.1.2 创建测试主题的应用....................................................................................... 36
8.1.3 创建自定义主题包和文件目录结构............................................................... 36
8.1.4 配置主题的继承关系....................................................................................... 36
8.1.5 修改全局主题变量........................................................................................... 37
8.1.6 应用主题........................................................................................................... 38
8.1.7 配置组件变量................................................................................................... 38
8.1.8 创建用户组件 UI...............................................................................................39
8.1.9 通过 JS 覆盖(override)主题.............................................................................. 40
定制 image.................................................................................................41
8.1.10
装饰你的应用................................................................................................... 41
8.2.1. 修改主题变量................................................................................................... 41
8.2.2. 装点应用视图................................................................................................... 41
使用 Sencha Themer 定制主题........................................................................ 42
8.3.1. 准备工作........................................................................................................... 42
8.3.2. 全局属性操作................................................................................................... 45
8.3.3. 组件属性操作................................................................................................... 48
Inspect 模式.......................................................................................................49
8.3.4.
8.3.5. 应用主题........................................................................................................... 50
8.1
8.2
8.3
9.1
9.2
9.3
9.4
9.4.1.
9.4.2.
10
10.1
10.2
10.3
10.4
10.5
8.3.6. 保存主题........................................................................................................... 50
8.3.7. 小结................................................................................................................... 50
9 字体图标库...................................................................................................................... 50
Font Awesome................................................................................................... 51
ExtJS Font........................................................................................................... 51
ExtJS Font........................................................................................................... 52
如何使用........................................................................................................... 53
iconCls 方式....................................................................................................... 53
glyph 方式..........................................................................................................53
结构................................................................................................................... 54
应用程序结构................................................................................................... 54
什么是 MVC.......................................................................................................54
什么是 MVVM................................................................................................... 54
MVC 和 MVVM.................................................................................................. 54
应用概览........................................................................................................... 55
应用程序 Application................................................................................ 56
app.js.......................................................................................................... 57
Application.js..............................................................................................58
视图............................................................................................................59
Controller................................................................................................... 63
ViewModel................................................................................................. 64
Model......................................................................................................... 64
Store........................................................................................................... 64
11 ExtJS 中的 ViewController................................................................................................64
Ext.app.Controller..............................................................................................65
Ext.app.ViewController......................................................................................65
引用................................................................................................................... 66
封装................................................................................................................... 68
监听器和事件作用域....................................................................................... 70
12 View Models and Data Binding.........................................................................................70
组件绑定........................................................................................................... 71
绑定和配置................................................................................................71
绑定布尔配置............................................................................................71
10.5.1.
10.5.2.
10.5.3.
10.5.4.
10.5.5.
10.5.6.
10.5.7.
10.5.8.
11.1
11.2
11.3
11.4
11.5
12.1
12.1.1.
12.1.2.
12.1.3.
12.1.4.
12.1.5.
12.1.6.
12.1.7.
12.2
12.3
12.4
12.5
12.6
13
13.1
13.2
13.3
14
14.1
14.2
14.3
14.4
14.5
14.6
14.7
14.8
14.9
14.10
14.11
15
15.1
15.2
15.3
15.4
15.4.1.
15.4.2.
绑定和优先权............................................................................................72
绑定和子组件............................................................................................72
双向绑定....................................................................................................73
绑定和组件状态........................................................................................75
绑定描述符................................................................................................76
创建视图模型................................................................................................... 78
计算式............................................................................................................... 78
计算式和显示绑定........................................................................................... 79
双向绑定........................................................................................................... 80
建议................................................................................................................... 80
深入探究视图模型........................................................................................... 81
数据和继承....................................................................................................... 82
调度和依赖....................................................................................................... 83
算式依赖........................................................................................................... 84
路由................................................................................................................... 84
路由用来做什么............................................................................................... 84
路由不能做什么............................................................................................... 84
什么是 hash.......................................................................................................85
在应用中实现路由........................................................................................... 85
更新 hash...........................................................................................................86
Default Token.....................................................................................................86
有参数的 Hash.................................................................................................. 86
Hash 参数的格式化.......................................................................................... 87
路由处理........................................................................................................... 87
处理不匹配的路由........................................................................................... 89
单个 Hash 里使用多重路由............................................................................. 90
登录的例子....................................................................................................... 90
生成应用........................................................................................................... 90
创建登录视图组件........................................................................................... 91
禁掉 mainView.................................................................................................. 91
创建登录窗口................................................................................................... 91
Window 的 items 配置.............................................................................. 94
xtype...........................................................................................................94
15.4.3.
15.4.4.
15.4.5.
15.4.6.
15.5
15.5.1.
15.5.2.
15.5.3.
15.5.4.
15.6
15.6.1.
15.6.2.
15.6.3.
15.6.4.
15.7
15.8
16
Form 的 tems............................................................................................. 94
Button.........................................................................................................95
formBind.....................................................................................................95
listeners...................................................................................................... 95
添加登录逻辑................................................................................................... 95
onLoginClick()............................................................................................. 96
localStorage................................................................................................96
getView().................................................................................................... 96
Ext.create({ xtype: 'app-main' }).................................................................96
Application.js 中加入 launch 逻辑....................................................................97
requires...................................................................................................... 98
launch.........................................................................................................98
localStorage.getItem()................................................................................98
三元运算....................................................................................................98
添加 Viewport 插件和退出登录按钮...............................................................99
添加主逻辑..................................................................................................... 102
支持的浏览器................................................................................................. 103
1 代码规范
类名
只允许使用字母和数字,不使用下划线’_’、不使用连字符’-’、总之,不能使用字母和数字之
外的字符。
MyCompany.useful_util.Debug_Toolbar 是非常危险的;
MyCompany.util.Base64 是非常好的做法。
顶层的命名空间和类名是驼峰式的,其它都要小写。
MyCompany.form.action.AutoLoad 是规范做法。
不是 Sencha 发布的代码,顶层的命名空间不能起名为 Ext。
首字母都是缩写的专业术语,也要采用驼峰式。
使用 Ext.data.JsonProxy
使用 MyCompany.util.HtmlParser
使用 MyCompany.server.Http
而非 Ext.data.JSONProxy
而非 MyCompary.parser.HTMLParser
而非 MyCompany.server.HTTP
代码文件
如同 Java 代码文件一样,遵循类的名字直接映射到它所在文件的存储路径,一个文件对应
一个类,不能在一个文件里写多个类。
类 Ext.util.Observable
类 Ext.form.action.Submit
类 MyCompany.chart.axis.Numeric 存储在 path/to/src/MyCompany/chart/axis/Numeric.js
存储在 path/to/src/Ext/util/Observable.js
存储在 path/to/src/Ext/form/action/Submit.js
方法和变量
如同类名一样,方法名和变量名同样只能出现字母和数字(数字仅允许出现在科学术语中,
其他情况不能使用数字),不要使用下划线’_’、连字符’-’以及任何其他的非字母和数字的符
号。
方法和变量名采用驼峰式,首字母缩写的专业术语同样采用驼峰式。
而非 encodeUsingMD5()
而非 getHTML()
而非 getJSONResponse()
而非 parseXMLContent()
方法名举例:
encodeUsingMd5()
getHtml()
getJsonResponse()
parseXmlContent()
变量名举例:
var isGoodName
var base64Encoder
var xmlReader
var httpServer
属性
如同类名一样,方法名和变量名同样只能出现字母和数字(数字仅允许出现在科学术语中,
其他情况不能使用数字),不要使用下划线’_’、连字符’-’以及任何其他的非字母和数字的符
号。
方法和变量名采用驼峰式,首字母缩写的专业术语同样采用驼峰式。
2 类系统
2.1 类的声明
使用 Ext.define 方法来定义一个类。
Ext.define(className, members, onClassCreated);
className: 类的名字
members 以名值对表示的类的成员集对象。
onClassCreated 可选的回调,发生在当该类所依赖的所有的类定义已经准备好并
且该类自身已经完全创建好的时候。
示例:
Ext.define('My.sample.Person', {
name: 'Unknown',
constructor: function(name) {
if (name) {
this.name = name;
}
},
eat: function(foodType) {
alert(this.name + " is eating: " + foodType);
}
});
var bob = Ext.create('My.sample.Person', 'Bob');
bob.eat("Salad"); // alert("Bob is eating: Salad");
使用 Ext.create 来创建一个类的实例。虽然可以使用 new 关键字来创建类的实例,如 new
My.sample.Person(),但推荐使用 Ext.create 来创建类的实例。
2.2 配置
类里有一个叫 config 的专属属性,它会在类被创建之前,被 Ext 强大的类预处理器处理。
每一个配置属性,如果没有被定义 getter 和 setter 方法,系统将自动生成 getter
和 setter 方法;
自动生成的 setter 方法,在设置该值之前,首先要调用 apply 方法(如果 apply 在
类中已经有定义的话)。如果需要在置值之前运行自定义逻辑的话,你可以改写某配
置属性所涉及的 apply 方法。如果 apply 方法没有返回值,setter 不会置值。当不
同的值被设置后,如果定义了 update 方法,该方法将被调用。