Ext JS 4的倒数：动态加载和新的类机制 Count down to Ext JS 4: Dynamic Loading and New Class
System
（上）
January 19, 2011 by Ed
Spencer 翻译 Ext中文网（ajaxjs.com） Frank
http://www.sencha.com/blog/2011/01/19/countdown-to-ext-js-4-dynamic-loading-and-new-class-system/
Ext JS 4 发布在即，官方Sencha.com/blog近期也发出介绍4.0新特性、新功能的稿子。Ext中文网过去几期都有对4.0的深入文章，希望可以做到与官网同步，为大家跟进新版本的信息。——至于何时能够释出代码，以及为啥推迟，，官方给我们的理由是为争取稳定性不惜花更多的时间去内部测试，故所以一再押后。我个人的印象是，Ext做东西从不贸然举动，为了较好的代码质量宁可不采纳那些不稳定的方案，推敲不起的代码……当然，届时出来了，表现怎么样还是一回事，就让我们耐心地拭目以待吧！
下为译文
JavaScript自己并没有类，所以一些新手开发者来的这儿就感觉环境很不熟悉。但是通过语言其自身强大的原型机制（prototype pattern） ，Ext
JS实现一套成熟丰满的类机制系统，务求可以进一步照顾我们的开发者，能够以他们熟悉的面向对象方法论（Object Oriented approach）写代码！
我们为Ext JS 4注入更多的新功能，期待让你们的开发更轻松亦更灵活。Ext
4将会有引入四大新功能——类机制、多态Mixin、配置项的读写器Setter/Getter和动态加载。
上面的插图形象地介绍了类的系统，比较关注的是Draggable和Resizable变为Mixin形式了。
类的定义 Class Definition
为显示不同，我们拿Ext JS
3 创建类的方式来作比较。这是一个登陆功能的窗口，以Ext.Windows为基类来扩展：
// Ext JS 3.x 类的定义
MyApp.LoginWindow = Ext.extend(Ext.Window, {
title: 'Log in',
initComponent: function() {
Ext.apply(this, {
items: [
{
xtype: 'textfield',
name : 'username',
fieldLabel: 'Username'
},
...
]
});
MyApp.LoginWindow.superclass.initComponent.apply(this, arguments);
}
});
一般来讲，这样子定义一个类是没有问题的。但是如果遇到Ext.Windows父类未曾定义的话就创建新子类，岂不会出现错误？的确，同样如果我们没定义过命名空间的话也是会出现错误的。在新的方式中，便解决了以上两个问题：
// Ext JS 4.x 类的定义方式
Ext.define('MyApp.LoginWindow', {
extend: 'Ext.Window',
title: 'Log in',
initComponent: function() {
Ext.apply(this, {
items: [
// 如上
]
});
MyApp.LoginWindow.superclass.initComponent.apply(this, arguments);
}
});
Ext JS 4的类名可以以字符串的形式写出，这样就保证不会上面的错误了。类管理器（Class
Manager）会聪明地看出Ext.Windows是否已定义，如果还没有，就等待定义好了Windows才创建MyApp.LoginWindow这个类，也就是说内部会有”延时创建“的这么一个过程。我们在程序中不再需要严格按照加载的顺序，框架帮我们都处理好了。
多态 Mixins
行文至此才刚开始，Ext
JS的类还有许多的功能留待你发现。其中首推介绍的是这个框架的“多态（Mixins）”能力。从多态的定义讲，是为了复用将多个动作和配置参数组合一起，再”混入（Mixed）“到某个类之中。要在您创建的类里面实现这种能力，只要引入多态的类到到您的类即可。例如，要使的你的类可拖动，混入Draggable
Mixin类吧。不限定混入类的数量，也就是说，这是一种多重继承的实现方案，能较好地解决JavaScript多态的难题。可这样定义多态的类：
Ext.define('Sample.Musician', {
extend: 'Sample.Person',
mixins: {
guitar: 'Sample.ability.CanPlayGuitar',
compose: 'Sample.ability.CanComposeSongs',
sing: 'Sample.ability.CanSing'
}
});
跟类定义的类似，引用类名称的都是字符串，故所以哪怕页面没加载的类也不会报错的。一个类允许加入多个混入，多态的那个类写法如下：
Ext.define('Sample.ability.CanPlayGuitar', {
playGuitar: function() {
// code to play
}
});
配置项自动的读写器 Auto Setters and Getters for Configurations
通过送入多种配置项，就可以客制化Ext
JS类。然后透过getter和setter的方法也可以读取、修改这些配置项参数，运行时的时候也可以作修改。整个库之中会大量出现这种需求，怎么去维护好便是一个问题。Ext
JS 4针对配置项参数的读、写、默认值、实时应用等这些具体的问题，提出了自动getter和setter的方案，务求凸显方便性，加速您的开发进程！我们看看例子：
Ext.define('MyClass', {
config: {
title: 'Default Title'
}
});
这里我们设置的类只有一个单独的配置项参数title，分配了titile的默认值“Default Title”。在Ext JS
4的类机制下自动分配getter/setter的方法。而在旧的3.3版本中，要达到等价的方法，我们必须僵硬地写出那些手工代码：
MyClass = Ext.extend(MyBaseClass, {
title: 'Default Title',
getTitle: function() {
return this.title;
},
resetTitle: function() {
this.setTitle('Default Title');
},
setTitle: function(newTitle) {
this.title = this.applyTitle(newTitle) || newTitle;
},
applyTitle: function(newTitle) {
// 这儿自定义代码
}
});
框架会自动生成上面的四个函数。在许多情况中，更新变量（属性）尚足够了，可是我们想通过特定的方式改变某个配置项，这样会比较好。例如新类中有标题需要在DOM元素中显示，我们可以告知DOM更新，便是这样子：
Ext.define('MyClass', {
extend: 'MyBaseClass',
config: {
title: 'Default Title'
},
applyTitle: function(newTitle) {
Ext.get('titleEl').update(newTitle);
}
});
类机制会自动生成上面四个函数，并且我们可以如上例的applyTitle方法来炮制方法的重写（override）。好处是不但能够节约您写代码时间上细微的花销，还能节约您程序的体积大小，换言之能让你的程序更快地被下载到客户端上。
（未完待续……）
----------------------------------------------------------------------------->
下半部分，将为大家介绍Ext 4的动态加载，并解释官方自带的四个例子——这是Ext从1.0以来用户便强烈需求的功能之一，或者觉得是“最最”需求的功能也不为过。因为单个ext-all.js的块头实在太大了，客户不仅下载得慢，而且还有冗余的代码——虽然网上有提供了多种方案，但多年来用户一直忍着，就是想让官方提供的方案，进行有益的指导。