Ext JS 四: 动态加载与新的类体系

Ext JS 4: 动态加载与新的类体系
Ext JS 4: 动态加载与新的类体系

1
Ext 4 部分新特性介绍：

define　         新的类定义方式,使用增强的原型方式实现继承
mixin　          混入类,类似多继承
setter/getter　属性读写方法配置
require          动态的依赖加载

2




3
Define

/** * 组件扩展 - 登录窗口 */Ext.define('App.LoginWindow', {extend : 'Ext.Window',title : '登录',initComponent : function() {Ext.apply(this, {items : [{xtype : 'textfield',name : 'username',fieldLabel : '账号'}, {xtype : 'textfield',name : 'password',fieldLabel : '密码'}]});this.callParent(arguments);}});

4
Mixin

/** * 音乐人 */Ext.define('Model.Musician', {extend : 'Model.Person',            requires: ['Model'],mixins : {guitar : 'Interface.CanPlayGuitar',compose : 'Interface.CanComposeSongs',sing : 'Interface.CanSing'}});/** * 混入用法 */        /*var someone = Ext.create('Model.Musician');someone.getMixin('guitar').playGuitar();// or someone.playGuitar();        */

/** * 玩吉它 */Ext.define('Interface.CanPlayGuitar', {playGuitar : function() {Ext.Msg.alert('info', 'Play Guitar'); }});

5
setter/getter

/** * 人 */// ExtJS3/*Model.Person = Ext.extend(Object, {name : 'noname',getName : function() {return this.name;},resetName : function() {this.setName('noname');},setName : function(newName) {this.name = this.applyName(newName) || newName;},applyName : function(newName) {                }});*/// ExtJS4 框架会自动上面的四个方法.Ext.define('Model.Person', {config : {name : 'noname'},                        // @override            applyName : function(newName) {                // 值改变时,执行一些动作            }});

6
requires
uses

Model.js

/** * 命名空间 */  Ext.ns('Model');

Musician.js

/** * 音乐人 */Ext.define('Model.Musician', {extend : 'Model.Person',            requires: ['Model'],mixins : {guitar : 'Interface.CanPlayGuitar',compose : 'Interface.CanComposeSongs',sing : 'Interface.CanSing'}});

ExtJS3 需要等框架加载完成后才能执行, 而ExtJS4 则会根据依赖动态加载JS执行.上面的 Model.Musician 会加载以下JS:
Musician.js
Model.js
Person.js
CanPlayGuitar.js
CanComposeSongs.js
CanSing.js
Interface.js


官方动态加载示例:
dev.sencha.com/deploy/LoaderDemo.zip

7
Statics

类名.方法名

    statics : [        count : 0,        fun : function() {}    ]

// 重载count时 this.getStatics().count 为父类, 而 this.self.count 则为子类.

查看更多 下一篇