Ext JS 4 升级指南

前言

Ext 4 在web 应用程序开发迈出了革命性的一步。 基本上框架的每个主要组件都做了改善,在Ext3的基础上,新增了不少新的组件和子系统。本篇介绍Ext 3 到  Ext 4 的主要变化。

 

Ext3 兼容性

Ext  提供了Ext 3 和 Ext 4 的迁移包。可以到以下下载:

Ext JS 3 to 4 Migration Pack (Updated October 10, 2011)

 

沙箱模式

针对js 的对象和变量,简单的通过给全局的Ext 对象以一个不一样的别名,可以将Ext 4和以前的版本完全的隔离开来。

对于CSS  和其他展现的东西,Ext 4 使用Compass & SASS从模板产出CSS, 很容易就可以定制CSS规则的前缀。—Ext.baseCSSPrefix 属性

 

包和命名空间的更新

所有的类和包都根据严格的命名规则进行了重组,查找类变得更容易。比如,在Ext 3的类中,像Button,CycleButton 和SplitButton 只是简单的放在widges 下面。

在Ext 4中,每一个类都依据不同的功能统一的放置到包和命名空间里。比如 Ext.SplitButton —> Ext.button.Split.

被重组的类仍然可以通过alternateClassName属性找到,所以Ext 3的类名如果需要在Ext 4中依旧可以使用(比如, 定义alternateClassName: ‘Ext.SplitButton’)。

不过建议如果没必要,还是使用最新的规范.

 

Ext 核心

新类系统

Ext 4  的主要功能有:

1. Ext.define 实现定义一个新的类型

2. 自动依赖管理和动态加载

3.  Mixins(混入)

4. Statics(静态)

5. 自动的setter/ getter生成的新配置选项

Ext 4 Class System

类的定义

在Ext 4中使用Ext.define 定义新的类,但仍然可以使用 “new ClassName()” 方式,只是就没有以下特性了,

使用Ext.define 的方式可以自动检测和创建新的命名空间,而不需要显示的去定义命名空间。

如下例:

 

[javascript][/javascript] view plaincopy

  1. // Ext 3:
  2. Ext.ns(‘MyApp’); // required in Ext 3
  3. MyApp.CustomerPanel = Ext.extend(Ext.Panel, {
  4.     // etc.
  5. });
  6. // Ext 4
  7. Ext.define(‘MyApp.CustomerPanel’, {
  8.     extend: ‘Ext.panel.Panel’,
  9.     // etc.
  10. });

类加载

 

Ext 4 提供了一个可选功能就是类加载和集成的依赖管理。 使用这个功能的好处是

1.  动态载入, Ext 会在内部管理,依据依赖树在运行的时候动态和异步的载入类。

2. 动态编译生成。

定义时,使用Ext.define 和使用以下两个类的属性定义依赖关系

requries

uses

 

Mixins

这是一个新的方式插入客制功能到已有的类中,和Ext.override 类似。但它不会像override 那样,覆盖原有的功能,定义方式如下:

 

[javascript][/javascript] view plaincopy

  1. Ext.define(‘Sample.Musician’, {
  2.     extend: ‘Sample.Person’,
  3.     mixins: {
  4.         guitar: ‘Sample.ability.CanPlayGuitar’,
  5.         compose: ‘Sample.ability.CanComposeSongs’,
  6.         sing: ‘Sample.ability.CanSing’
  7.     }
  8. });

Statics

 

可以在类中定义静态的方法通过 类的static 属性

 

Config

可以使用 “config” 在class 中定义属性,Ext会自动产生setter 和 getter 方法。 在旧版本中我们使用API 方式进行。

而使用config 方式, 会自动生成 getter, setter, reset 和 apply(用来客制化逻辑)方法。 比如:

 

[javascript][/javascript] view plaincopy

  1. Ext.define(‘MyClass’, {
  2.     config: {
  3.         title: ‘Default Title’
  4.     }
  5. });

以下方法会自动生成:

 

 

[javascript][/javascript] view plaincopy

  1. title: ‘Default Title’,
  2. getTitle: function() {
  3.     return this.title;
  4. },
  5. resetTitle: function() {
  6.     this.setTitle(‘Default Title’);
  7. },
  8. setTitle: function(newTitle) {
  9.    this.title = this.applyTitle(newTitle) || newTitle;
  10. },
  11. applyTitle: function(newTitle) {
  12.     // custom code here
  13.     // e.g. Ext.get(‘titleEl’).update(newTitle);
  14. }

标签