Ext JS 4：动态加载和新的类机制(Dynamic Loading and New Class System)

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为基类来扩展：

view plaincopy to clipboardprint?
// 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父类未曾定义的话就创建新子类，岂不会出现错误？的确，同样如果我们没定义过命名空间的话也是会出现错误的。在新的方式中，便解决了以上两个问题：

view plaincopy to clipboardprint?
// 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多态的难题。可这样定义多态的类：

view plaincopy to clipboardprint?
Ext.define('Sample.Musician', { 
extend: 'Sample.Person', 

mixins: { 
guitar: 'Sample.ability.CanPlayGuitar', 
compose: 'Sample.ability.CanComposeSongs', 
sing: 'Sample.ability.CanSing' 
} 
}); 

跟类定义的类似，引用类名称的都是字符串，故所以哪怕页面没加载的类也不会报错的。一个类允许加入多个混入，多态的那个类写法如下：

view plaincopy to clipboardprint?
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的方案，务求凸显方便性，加速您的开发进程！我们看看例子：

view plaincopy to clipboardprint?
Ext.define('MyClass', { 
config: { 
title: 'Default Title' 
} 
});

 

这里我们设置的类只有一个单独的配置项参数title，分配了titile的默认值“Default Title”。在Ext JS 4的类机制下自动分配getter/setter的方法。而在旧的3.3版本中，要达到等价的方法，我们必须僵硬地写出那些手工代码：

view plaincopy to clipboardprint?
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更新，便是这样子：

view plaincopy to clipboardprint?
Ext.define('MyClass', { 
extend: 'MyBaseClass', 

config: { 
title: 'Default Title' 
}, 

applyTitle: function(newTitle) { 
Ext.get('titleEl').update(newTitle); 
} 
}); 

类机制会自动生成上面四个函数，并且我们可以如上例的applyTitle方法来炮制方法的重写（override）。好处是不但能够节约您写代码时间上细微的花销，还能节约您程序的体积大小，换言之能让你的程序更快地被下载到客户端上。