[Sencha] 深入 Sencha 类中的 配置项(Config) 系统
来源:互联网 发布:用mac怎么在优酷下视频 编辑:程序博客网 时间:2024/06/03 20:44
从一开始,Ext JS框架就实现了一个类系统,来扩展JavaScript。类系统的目标是支持高效的代码组织,并实现在许多面向对象编程语言中都有的”伪”经典继承。
随着Ext JS 4.0的发布,Sencha决定重新审视他们的类系统,并以更多的面向对象的好东西来提升它。特别是他们开发了一个配置项(Config)系统,用来扩充 类成员属性。这篇博客文章将深入到Config系统,以及它如何在Ext JS 4.x,5.x, 6.x和Sencha Touch 2.x中使用。
Sencha 类系统
Sencha类系统是整个框架系列的基础,从一个名为Ext.Base的类开始。除了少数例外,类名必须遵循与其文件路径直接相关的命名约定。
下面是一个示例Sencha类的定义,实例和用法:在Fiddle上查看
// 定义一个名为"Car"的类Ext.define('Car', { // 定义配置项 config : { make : undefined, model : undefined }, // 类实例化时首先被调用的方法 constructor : function (config) { // 初始化 配置项 this.initConfig(config); }, // 定义一个 drive 方法 drive : function () { console.log('Driving ' + this.getMake() + ' ' + this.getModel()); }});// 实例化 "Car" 类,并传入配置项var car = Ext.create('Car', { make : 'Honda', model : 'Accord'});// 调用实例的 "drive" 方法// 浏览器控制台输出 "Driving Honda Accord"car.drive();
配置项系统
您可能会注意到,我们在该类示例中定义了一些配置项。让我们深入探讨发生了什么。JavaScript解释器将函数参数视为一个普通对象,并带有一个“config”键,内含一些子成员。然后,在类实例化过程中,initConfig方法会被调用。如上所述,这个方法初始化该类的实例的配置项系统。然后,配置项系统向类的实例注册相关的属性和配置项方法。
配置方法
Getter 访问器
Getter 访问器方法,返回配置项的当前值。这是配置项系统自动生成的方法。在Fiddle上查看
car.getMake(); // 返回 “Honda”
Setter 访问器
Setter 访问器方法,用于设置类实例上配置项的值。这也是配置项系统自动生成的方法。在Fiddle上查看
car.setMake(“Toyota”);car.getMake(); // 返回“Toyota”
Applier
在配置项的值改变的时候,这个函数被setter调用(例如从undefined到“Foo”)。Applier 函数必须返回一个值; 这个值将是配置项的新值。Applier 方法由配置项系统自动生成,通常在设置配置项值之前,执行某种逻辑。
在Fiddle上查看
// 定义 applier 函数 的例子applyMake : function (newValue, oldValue) { // 执行某些逻辑 if(oldValue.length > newValue.length) { return oldValue.toUpperCase(); } return newValue.toUpperCase(); }
Updater
当配置项的值改变(例如从“Foo”到“Bar”)时,Updater 函数在施加器之后由setter调用。Updater 函数通常被用作当配置项的值改变之后的反应。
在Fiddle上查看
// 定义 updater 函数 的例子updateModel : function (newValue, oldValue) { if(newValue === 'Accord') { this.setMake('Honda'); } else if(newValue === 'Camry') { this.setMake('Toyota'); }}
潜在的情况
- 根据配置项值的更改,来改变组件的UI元素 在Fiddle上查看
// 当 make 配置项设置了值时候,启用 Drive 按钮applyMake : function (newValue, oldValue) { if(newValue) { this.down('button#drivebutton').enable(); } return newValue;}
- 一旦配置项的值被设置,就实例化一个必需的依赖关系。
示例: 当URL传入的时候,则 实例化或加载 Store. 在Fiddle上查看
// 当设置了 "storeUrl" 的时候,实例化一个 storeapplyStoreUrl : function (url) { if(url) { this.setStore(Ext.create('Ext.data.Store', { fields : ['name'], proxy : { type : 'ajax', url : url, } })); } return url;}
- 基于配置项的值实例化一个子组件。
示例如:添加一个工具栏到面板。在Fiddle上查看
// 利用传入的 cfg 参数实例化 Ext.Toolbar,并返回工具栏的实例applyHeaderToolbar : function (cfg) { if(cfg) { var tbar = this.tbar = Ext.create('Ext.Toolbar', cfg); return tbar; }}
Ext JS 4 vs Ext JS 5 vs Ext JS 6 vs Sencha Touch 2
尽管Ext JS 4,5,6和Sencha Touch 2共享相同的类系统,但是在配置系统在框架中的角色方面存在一些差异。
在Ext JS 4中,配置项系统不是主力。坦率地说,就连ExtJS4框架本身都很少使用(如果曾经)。因此许多开发者一直忽视了它的存在。
在Ext JS 5.x中,Sencha开始将配置项系统集成到其框架中。Ext JS现在在组件级初始化配置系统。有了这个,所有组件都利用配置项,而不是成员属性。在Ext JS 5配置系统中的一个新特性是,自定义的Setter现在可以通过callParent来调用父类自动生成的Setter。
Sencha Touch 2是其前身的一个重大转变。这让Sencha灵活地从头开始,做“正确”的事情。这对于类系统来说意味着在整个框架中强制使用配置项系统。Sencha Touch 2需要您使用配置项系统来操作类属性。它在内部充分利用该系统的全部潜力。
- [Sencha] 深入 Sencha 类中的 配置项(Config) 系统
- [Sencha] 使用 Ext.Config
- sencha
- sencha 类系统(一)
- mac系统下配置Sencha环境变量
- sencha类系统(二)-processors
- iis7 sencha 配置
- sencha touch 环境配置
- sencha touch 环境配置
- 怎样使用Sencha Touch 2中的类
- sencha touch 入门系列 (七)sencha touch 类系统讲解(上)
- sencha touch 入门系列 (八)sencha touch类系统讲解(下)
- 浅谈Sencha Touch--环境配置
- sencha touch下dataview配置
- Sencha Touch 2.3 中的坑
- Sencha touch中的scope原理
- sencha touch中的日期控件
- Sencha Touch视频教程 Sencha Touch实战OA系统开发
- Jquery,JS全部替换replace
- 希拉里就AI发出警告: 人类完全没准备好
- Map(4)--HashMap
- MySQL 加锁处理分析
- 在win7下配置pyspark在jupyter notebook中使用的简单方法
- [Sencha] 深入 Sencha 类中的 配置项(Config) 系统
- 习题7.5
- sourcetree 安装 账号 account
- C++面向对象基础快速掌握--自学笔记(二)
- struts2配置后缀
- 如何用课件制作工具制作三角形旋转动画
- git代码下载本地运行
- Linux备忘命令
- 华为三层交换机配置VLAN间路由