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

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

1
Ext 4 部分新特性介绍：

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

2

[img]http://dl.iteye.com/upload/attachment/0062/7411/19029a51-be6e-3ce7-9405-1d229aa8e23c.bmp[/img]


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


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

7
Statics

类名.方法名

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

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