Ext JS 4 升级指南| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

Ext JS 4 升级指南

## 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中使用Ext.define 定义新的类，但仍然可以使用 "new ClassName()" 方式，只是就没有以下特性了，
使用Ext.define 的方式可以自动检测和创建新的命名空间，而不需要显示的去定义命名空间。
如下例：
```javascript
// Ext 3:
Ext.ns('MyApp'); // required in Ext 3
MyApp.CustomerPanel = Ext.extend(Ext.Panel, {
// etc.
});
// Ext 4
Ext.define('MyApp.CustomerPanel', {
extend: 'Ext.panel.Panel',
// etc.
});
```

### 类加载
Ext 4 提供了一个可选功能就是类加载和集成的依赖管理。 使用这个功能的好处是
1.  动态载入， Ext 会在内部管理，依据依赖树在运行的时候动态和异步的载入类。
2. 动态编译生成。
定义时，使用Ext.define 和使用以下两个类的属性定义依赖关系
requries
uses

### Mixins
这是一个新的方式插入客制功能到已有的类中，和Ext.override 类似。但它不会像override 那样，覆盖原有的功能，定义方式如下：
```javascript
Ext.define('Sample.Musician', {
extend: 'Sample.Person',
mixins: {
guitar: 'Sample.ability.CanPlayGuitar',
compose: 'Sample.ability.CanComposeSongs',
sing: 'Sample.ability.CanSing'
    }
});
```

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

### Config
可以使用 "config" 在class 中定义属性，Ext会自动产生setter 和 getter 方法。 在旧版本中我们使用API 方式进行。
而使用config 方式， 会自动生成 getter, setter, reset 和 apply（用来客制化逻辑）方法。 比如：
```javascript
Ext.define('MyClass', {
config: {
title: 'Default Title'
    }
});
```

以下方法会自动生成：
```javascript
title: 'Default Title',
getTitle: function() {
returnthis.title;
},
resetTitle: function() {
this.setTitle('Default Title');
},
setTitle: function(newTitle) {
this.title = this.applyTitle(newTitle) || newTitle;
},
applyTitle: function(newTitle) {
// custom code here
// e.g. Ext.get('titleEl').update(newTitle);
}
```

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

Ext JS 4 升级指南

网站导航