logo资料库

ExtJS6.2中文开发指南.pdf

第1页 / 共106页
第2页 / 共106页
第3页 / 共106页
第4页 / 共106页
第5页 / 共106页
第6页 / 共106页
第7页 / 共106页
第8页 / 共106页
资料共106页,剩余部分请下载后查看
1代码规范
2类系统
2.1类的声明
2.2配置
2.3静态方法
3布局和容器
3.1容器Container
3.2布局
3.2.1使用布局
3.2.2工作原理
4组件
4.1组件层级树
4.2xtype和延迟初始化
4.3浮动组件
4.4创建自定义组件
4.4.1组合还是继承
4.4.2模板方法
4.4.3扩展哪个类
5数据包
5.1Model
5.1.1创建Model
5.2Store
5.3Validation
6事件
6.1什么是Event
6.2监听Event
6.3后续添加监听事件监听器
6.4删除监听器
6.5scope选项
6.6只监听一次事件
6.7使用缓存
6.8触发自定义事件
6.9监听DOM事件
7内存泄露
7.1阻止基类清理工作
7.2没有清除DOM的监听器
7.3保持对象的引用
7.4持续创建有副作用的实例
7.5清除任何在缓存中的注册
7.6小结
8定义应用外观
8.1制作主题
8.1.1准备工作
8.1.2创建测试主题的应用
8.1.3创建自定义主题包和文件目录结构
8.1.4配置主题的继承关系
8.1.5修改全局主题变量
8.1.6应用主题
8.1.7配置组件变量
8.1.8创建用户组件UI
8.1.9通过JS覆盖(override)主题
8.1.10定制image
8.2装饰你的应用
8.2.1.修改主题变量
8.2.2.装点应用视图
8.3使用Sencha Themer定制主题
8.3.1.准备工作
8.3.2.全局属性操作
8.3.3.组件属性操作
8.3.4.Inspect模式
8.3.5.应用主题
8.3.6.保存主题
8.3.7.小结
9字体图标库
9.1Font Awesome
9.2ExtJS Font
9.3ExtJS Font
9.4如何使用
9.4.1.iconCls方式
9.4.2.glyph方式
10结构
10.1应用程序结构
10.2什么是MVC
10.3什么是MVVM
10.4MVC和MVVM
10.5应用概览
10.5.1.应用程序Application
10.5.2.app.js
10.5.3.Application.js
10.5.4.视图
10.5.5.Controller
10.5.6.ViewModel
10.5.7.Model
10.5.8.Store
11ExtJS中的ViewController
11.1Ext.app.Controller
11.2Ext.app.ViewController
11.3引用
11.4封装
11.5监听器和事件作用域
12View Models and Data Binding
12.1组件绑定
12.1.1.绑定和配置
12.1.2.绑定布尔配置
12.1.3.绑定和优先权
12.1.4.绑定和子组件
12.1.5.双向绑定
12.1.6.绑定和组件状态
12.1.7.绑定描述符
12.1.7.1.多重绑定
12.1.7.2.记录绑定
12.1.7.3.关联绑定
12.1.7.4.绑定选项
12.2创建视图模型
12.3计算式
12.4计算式和显示绑定
12.5双向绑定
12.6建议
13深入探究视图模型
13.1数据和继承
13.2调度和依赖
13.3算式依赖
14路由
14.1路由用来做什么
14.2路由不能做什么
14.3什么是hash
14.4在应用中实现路由
14.5更新hash
14.6Default Token
14.7有参数的Hash
14.8Hash参数的格式化
14.9路由处理
14.10处理不匹配的路由
14.11单个Hash里使用多重路由
15登录的例子
15.1生成应用
15.2创建登录视图组件
15.3禁掉mainView
15.4创建登录窗口
15.4.1.Window的items配置
15.4.2.xtype
15.4.3.Form的tems
15.4.4.Button
15.4.5.formBind
15.4.6.listeners
15.5添加登录逻辑
15.5.1.onLoginClick()
15.5.2.localStorage
15.5.3.getView()
15.5.4.Ext.create({ xtype: 'app-main' })
15.6Application.js中加入launch逻辑
15.6.1.requires
15.6.2.launch
15.6.3.localStorage.getItem()
15.6.4.三元运算
15.7添加Viewport插件和退出登录按钮
15.8添加主逻辑
16支持的浏览器
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 方法,该方法将被调用。
分享到:
收藏