[Ext JS 4] 实战之升级系列一[Ext jS 3-->Ext JS 4]| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS 4] 实战之升级系列一[Ext jS 3-->Ext JS 4]

## [Ext JS 4] 实战之升级系列一[Ext jS 3-->Ext JS 4]
### 前言
若干年前，使用Ext JS 3 开发了一个系统。
随着Ext JS 4的出现，总是会看到或听到关于Ext 比较多的言论是 ：
Ext JS 4 较Ext JS 3 有较大的改变。
Ext JS 4不向下兼容。
Ext JS 4 开始收费了。
基于这些，对Ext JS 4一直就望而却步。也曾转向使用dojo.
但是对Ext JS 4 的新的平板风格和一些性能上的考量之后，还是决定使用Ext js 4.
在升级结束之际，总结一些主要的改变和应对之策。

### 创建组件方法 new Ext.XXX ==> Ext.create("",{})
在Ext JS 4之前，创建一个组件的方法是：
```javascript
var win = newExt.Window({  
//some options  
    });  
在Ext JS 4中， 创建一个组件的方法改变了。 使用Ext.create 的方式。
var win = Ext.create("Ext.window.Window",{  
//some options  
    });  
```
这中改变，其实是Ext JS 4 改进的一个亮点， 就是支持动态加载了。
在使用旧的方式的时候，相应组件定义的js 文件必须被先include 进来(旧的版本全部包在ext-all.js中)， 在新版中可以只导入一些核心的类，其他需要的类使用require 的方式动态导入， 好处就是提高了性能。
当然，在新版中也是支持旧的创建方式的。所以对于升级这件事来说，如果不考虑或者这种类型不考虑动态加载的话， 可以不做更改。

### 数据模型改变(Ext.data.Record ==> Ext.data.Model)
这个已经完全替换了， 就的方式已经不能work了，必须更改
直接看两个例子就清楚了：
Ext JS 3 的方式：
```html
DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Insert title heretitle>
<scripttype="text/javascript"src="../adapter/ext/ext-base.js">script>
<scripttype="text/javascript"src="../ext-all.js">script>
<linkrel="stylesheet"type="text/css"href="../resources/css/ext-all.css"/>
<script>
Ext.onReady(function(){
var persons = [{
name: 'Liu Bei',
rank: 'Marshal'
    }, {
name: 'Zhang Fei',
rank: 'Admiral'
    }, {
name: 'Guan Yu',
rank: 'Admiral'
    }, {
name: 'Zhao zilong',
rank: 'Admiral'
    }];
var personRecord = Ext.data.Record.create([{
name: 'name'
    }, {
name: 'rank'
    }]);
var personStore = newExt.data.Store({
data: persons,
reader: newExt.data.JsonReader({
id: 'personXX'
        }, personRecord)
    });
var personGrid = newExt.grid.GridPanel({
title: 'Three Kingdom',
region: 'center',
margins: '0 5 5 0',
height: 400,
columns: [{
dataIndex: 'name',
header: 'Name',
width: 200
        }, {
dataIndex: 'rank',
header: 'Rank',
width: 300
        }],
store: personStore,
renderTo: Ext.getBody()
    });
});
script>
head>
<body>
body>
html>

```
Ext JS 4的写法
```html
DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Insert title heretitle>
<scripttype="text/javascript"src="../ext-all.js">script>
<linkrel="stylesheet"type="text/css"href="../resources/css/ext-all.css"/>
<script>
Ext.onReady(function(){
var persons = [{
name: 'Liu Bei',
rank: 'Marshal'
    }, {
name: 'Zhang Fei',
rank: 'Admiral'
    }, {
name: 'Guan Yu',
rank: 'Admiral'
    }, {
name: 'Zhao zilong',
rank: 'Admiral'
    }];
var personModel = Ext.define('Person',
    	{
extend: 'Ext.data.Model',
fields: [{name: 'name',  type: 'string'},{name: 'rank',  type: 'string'}]
    });
var personStore = Ext.create('Ext.data.Store',{
model: 'Person',
data: persons
    });
var personGrid = newExt.grid.GridPanel({
title: 'Three Kingdom',
region: 'center',
margins: '0 5 5 0',
height: 400,
columns: [{
dataIndex: 'name',
header: 'Name',
width: 200
        }, {
dataIndex: 'rank',
header: 'Rank',
width: 300
        }],
store: personStore,
renderTo: Ext.getBody()
    });
});
script>
head>
<body>
body>
html>
```

注意，为了更清楚的比较，这里只仅仅是让模型和store 的写法不一致(Grid 的定义也要使用Ext.create的方式)。
这里还可以看到一个区别就是Ext JS 4不需要额外导入 ext-base.js

### 新类型定义（Ext.reg ==> Ext.define）
从Ext.reg 转到Ext.define来创建组件类， 一个好处也是可以实现动态加载JS 类。
而且新的方式会自动完成命名空间的创建(namespace).
旧的方式：
```html
Ext.ns("Foo.bar");  
Foo.bar = Ext.extend(Ext.util.Observable,{  
//your code here  
    });  
Ext.reg("foobar",Foo.bar);

新的方式:
Ext.define("Foo.bar",{  
            extend : "xxxxxx",  
            alias : "widget.foobar"
//your code here  
    });  
```
不难理解，为什么可以实现动态记载。一个创建需要的是一个js 对象，而另外一个只是一个string.

### Store定义的变化(跨域参数传递)
旧的方式：
```html
var store = newExt.data.Store({
proxy: newExt.data.ScriptTagProxy({
url: 'http://extjs.com/forum/topics-remote.php'
        }),
        ......
baseParams: {limit:20, forumId: 4}
    });
```

新的方式：
```html
var store = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'jsonp',
        url : 'http://extjs.com/forum/topics-remote.php',
extraParams: {limit:20, forumId: 4}
    }
});
```

上面介绍的 ”数据模型改变(Ext.data.Record ==> Ext.data.Model) “也是store reader 的定义的变化。
除此之外，上面的例子还有三个不一样的地方：
1. new Ext.XXX ==> Ext.create, 这个上面也介绍到了
2. 跨域取数据的store 定义 （不兼容，需要更新）
旧的方式使用new Ext.data.ScriptTagProxy，新的方式只需要指定proxy的type 为 jsonp 就可以了
3. 参数传递(不兼容，需要更新)
旧的方式是在store 下配置baseParams, 新的方式需要到proxy 下配置extraParams.

### applyTo/renderTo 的改变

参考：
[Ext JS 4] contentEL,renderTo, applyTo 释义与区别
http://blog.csdn.net/oscar999/article/details/9344639

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS 4] 实战之升级系列一[Ext jS 3-->Ext JS 4]

网站导航