ExtJS 3升级到ExtJS 4

Posted 周二, 01/03/2017 - 18:40 by admin

前言

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

创建组件方法

new Ext.XXX ==> Ext.create("",{})

在ExtJS 4之前，创建一个组件的方法是：

var win = new Ext.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了，必须更改
直接看两个例子就清楚了：
ExtJS 3 的方式：

<!-- add by oscar999 -->  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>  
<script type="text/javascript" src="../ext-all.js"></script>  
<link rel="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 = new Ext.data.Store({  
        data: persons,  
        reader: new Ext.data.JsonReader({  
            id: 'personXX'  
        }, personRecord)  
    });  
      
    var personGrid = new Ext.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>

ExtJS 4的写法

<!-- add by oscar999 -->  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
<script type="text/javascript" src="../ext-all.js"></script>  
<link rel="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 = new Ext.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的方式)。
这里还可以看到一个区别就是ExtJS 4不需要额外导入 ext-base.js

新类型定义

Ext.reg ==> Ext.define

从Ext.reg 转到Ext.define来创建组件类，一个好处也是可以实现动态加载JS 类。
而且新的方式会自动完成命名空间的创建(namespace).
旧的方式：

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定义的变化

(跨域参数传递)
旧的方式：

var store = new Ext.data.Store({  
	proxy: new Ext.data.ScriptTagProxy({  
		url: 'http://extjs.com/forum/topics-remote.php'  
	}),  
	......  
	baseParams: {limit:20, forumId: 4}  
});

新的方式：

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.