ExtJS 4.0 的改變--較爲完整的介紹

轉自：http://blog.csdn.net/tctc_2/article/details/7526892

 

慣例，看之前先看看我的很久很久以前的學習筆記（就是那個Word文檔，沒興趣的可以不看，不影響）：
http://wenku.baidu.com/view/ce8d3e08763231126edb1146.html

本文裏面不會詳細介紹某些方法函數具體如何使用，例子全部自己寫的（部分參考API和ExtJS 4.0 Developer Preview），應該不會有錯，提到的方法函數只提供名字，自己去API看（在此嚴重鄙視一些照搬API就出本書撈錢的人）

基礎上的變化：

兼容性
ExtJS4最終會提供一個兼容ExtJS 3的解決方案。

沙箱模式
可是使用alias來爲組件添加別名，類似以前的Ext.reg，不過alias會用不同的類別區分開來，例如，widget.xxxxx和feature.xxxxx是不一樣的，雖然它們都是用alias來定義的，但是類別完全不同。

包和命名空間的改變
現在的ExtJS不再使用混亂的分包機制（其實以前的感覺更加直白），例如以前的Window，包名是Ext.Window，但是現在則是Ext.window.Window，Ext.window包下還包括了Ext.window.MessageBox等。SplitButton則是Ext.button.Split。

創建新的對象
現在ExtJS使用Ext.define函數來創建組件類，該函數還能實現自動加載JS類（uses屬性，需設置Ext.Loader爲開啓詳見下文，看不懂看API），它會自動的完成以前的ns（namespace）功能。例如下面

Ext.ns("Foo.bar");

Foo.bar = Ext.extend(Ext.util.Observable,{
        //your code here
});
Ext.reg("foobar",Foo.bar);

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
});

Ext.define("Foo.bar",{
        extend : "xxxxxx",
        alias : "widget.foobar"
        //your code here
});

現在ExtJS不再使用new關鍵字（當然你想用也沒關係），而是推薦使用Ext.create函數來解決這個問題，例如以往我們創建一個組件的代碼是

var win = new Ext.Window({
        //some options
});

var win = new Ext.Window({
        //some options
});

而現在則是

var win = Ext.create("Ext.window.Window",{
        //some options
});

var win = Ext.create("Ext.window.Window",{
        //some options
});

新的類加載方法--Class Loading
現在ExtJS可以動態加載JS文件（類）了，新的Ext.Loader類和一些其它的方法可以完成分別加載所需的JS文件，例如Ext.Loader裏的setPath、require等方法函數可以做到動態加載。
如果要使用這個功能，你首先得啓用它：

Ext.Loader.setConfig({
      enabled: true,
      paths: {
          'My': 'my_own_path'
      }
});

Ext.Loader.setConfig({
      enabled: true,
      paths: {
          'My': 'my_own_path'
      }
});

path的意思是，當前引用這個JS的HTML文件同級的my_own_path目錄被命名爲My,所以以後該目錄下的所有類名爲My.xxxx的類都能被動態加載。
例如以下文件目錄：

在定義的時候就是：

Ext.Loader.setConfig({
      enabled: true,
      paths: {
          'NS': 'app'
      }
});

Ext.Loader.setConfig({
      enabled: true,
      paths: {
          'NS': 'app'
      }
});

app/person文件夾中的類名爲LKPerson的定義代碼爲：

Ext.define("NS.person.LKPerson", {
    extend : "Ext.panel.Panel",
        alias : "widget.lkperson",//當然，這個屬性不是必須的
    border : false,
        initComponent : function(){
                this.callParent(arguments);//這個arguments你懂，不懂Google
        }
})

Ext.define("NS.person.LKPerson", {
    extend : "Ext.panel.Panel",
        alias : "widget.lkperson",//當然，這個屬性不是必須的
    border : false,
        initComponent : function(){
                this.callParent(arguments);//這個arguments你懂，不懂Google
        }
})

注意一點的就是，NS.person.LKPerson中的LKPerson就是文件名稱（換句話說文件名必須是LKPerson且必須在person目錄下）

好了，下面看看動態加載的兩種方式：
require的用法如下：

Ext.require("Foo.bar");

Ext.define("AA.bb.CC",{
        //some options
});

Ext.require("Foo.bar");

Ext.define("AA.bb.CC",{
        //some options
});

require的意思是：在這個類（AA.bb.CC）被加載之前必須要加載Foo.bar並且被實例化（雖然好用但是勸各位不要濫用）。

uses的用法如下：

Ext.define("AA.bb.CC",{
        uses:["Foo.bar"]
});

Ext.define("AA.bb.CC",{
        uses:["Foo.bar"]
});

uses的意思是：在這個類（AA.bb.CC）在運行過程中要用到Foo.bar這個類，用到的時候再加載。

其它的就不多解釋，具體看API（這句話我最後說一遍 ）

混入類
將一個類混入到另外一個類中，創建的時候一同創建：

Ext.define("Dog",{
    sayHello : function(){
        alert("AAAA")
    }
})

Ext.define("Animal",{
    mixins:{
        dog:"Dog"
    }
});


Ext.onReady(function(){
    var an = Ext.create("Animal");
    an.mixins.dog.sayHello();
})

Ext.define("Dog",{
    sayHello : function(){
        alert("AAAA")
    }
})

Ext.define("Animal",{
    mixins:{
        dog:"Dog"
    }
});


Ext.onReady(function(){
    var an = Ext.create("Animal");
    an.mixins.dog.sayHello();
})

靜態方法
現在所有的類（是所有的ExtJS類，Ext.define定義的）都提供靜態方法，可以很方便的定義：

Ext.define('Computer', {
     statics: {
         factory: function(brand) {
             // 'this' in static methods refer to the class itself
             return new
this(brand);
         }
     },

     constructor: function() { ... }
});

var dellComputer = Computer.factory('Dell');

Ext.define('Computer', {
     statics: {
         factory: function(brand) {
             // 'this' in static methods refer to the class itself
             return 
new this(brand);
         }
     },

     constructor: function() { ... }
});

var dellComputer = Computer.factory('Dell');

Config
這個東西很時髦，看看用法：

Ext.define("Foo",{
    config: {
        title: 'Default Title'
    },
    constructor: function(cfg) {
        this.initConfig(cfg);
    }
});


Ext.onReady(function(){
    var an = Ext.create("Foo",{
        title:"My Title"
    });
    console.log(an.getTitle());
});

Ext.define("Foo",{
    config: {
        title: 'Default Title'
    },
    constructor: function(cfg) {
        this.initConfig(cfg);
    }
});


Ext.onReady(function(){
    var an = Ext.create("Foo",{
        title:"My Title"
    });
    console.log(an.getTitle());
});

運行以下看看會出現什麼？是My Title，config會自動生成getter和setter還有apply方法。

Ext.env.Browser
這個東西很好很強大。。。。記得以前有Ext.isIE、Ext.isFF等方法判斷瀏覽器，這次ExtJS 4不僅保留了以前的函數，還提供了更爲強大Ext.env包來幹這些事情，這個包下面還有其它兩個類：
Ext.env.OS，顧名思義判斷操作系統的，印象中ExtJS3中好像也有，不過這次新增了一些操作系統（主要是移動領域的操作系統）。

if (Ext.os.is.Windows) {
     // Windows specific code here
}

if (Ext.os.is.iOS) {
     // iPad, iPod, iPhone, etc.
}

if (Ext.os.is.Windows) {
     // Windows specific code here
}

if (Ext.os.is.iOS) {
     // iPad, iPod, iPhone, etc.
}

Ext.env.FeatureDetector,這個絕對是新加的，主要用於判斷HTML5和CSS3的，例如

• CSS3/動畫/轉換
• Canvas/ SVG/ VML
• 觸摸屏是否可用/方向
• 地理位置（HTML5的東西相信不陌生吧？）
• SqlDatabase
• WebSockets
• History
• 音頻
• 視頻

Lang包的修改
不知道lang是什麼意思？（想想java.lang.String和java.lang.Number吧）
現在ExtJS 4一直在爲新的ECMAScript標準做準備，這就是爲什麼要有這個包存在的原因，新的ECMAScript標準大家可以在ActionScript3中詳細看看，AS3基本上是遵循了下一代ECMAScript標準的，例如數據類型String、Number、Array、uint等等，ExtJS 4爲了能與下一代的ECMAScript標準兼容，提前提供了這些東西的JS實現。

Ext.Function
這個東西不知道大家平時用不用（也許大家用了沒察覺到），我是經常用的。例如在以往的ExtJS版本中的代碼：

function foo(){
       //這裏
}.createDelegate(scope,arguments);

function foo(){
       //這裏
}.createDelegate(scope,arguments);

現在變成了（這裏使用了一個綜合的例子，大家可以重點看看bind的用法）：

Ext.define("Foo",{
    config:{
        bar:"I don't need sex,the government fucks me every day!"
    },
    constructor : function(cfg){
        this.initConfig(cfg);
    }
});

function fun(str){
    if(str){
        alert(str);
        return;
    }
    alert(this.getBar());
}

Ext.onReady(function(){
    var foo = Ext.create("Foo");
    Ext.bind(fun,foo)();//後面的括號你懂
    //如果要傳遞參數可以以數組的形式放入，例如這樣：
    //Ext.bind(fun,foo,["私はセックスを必要としない、政府は毎日私をファック！"])();
});

Ext.define("Foo",{
    config:{
        bar:"I don't need sex,the government fucks me every day!"
    },
    constructor : function(cfg){
        this.initConfig(cfg);
    }
});

function fun(str){
    if(str){
        alert(str);
        return;
    }
    alert(this.getBar());
}

Ext.onReady(function(){
    var foo = Ext.create("Foo");
    Ext.bind(fun,foo)();//後面的括號你懂
    //如果要傳遞參數可以以數組的形式放入，例如這樣：
    //Ext.bind(fun,foo,["私はセックスを必要としない、政府は毎日私をファック！"])();
});

好了，我承認我有點那啥，不過希望不影響你繼續讀下去的興趣。

相同的還有
ExtJS 3中的

myFunction.defer(1000, scope);

myFunction.defer(1000, scope);

變成了4中的

Ext.defer(myFunction, 1000, scope);

Ext.defer(myFunction, 1000, scope);

還有callBack變成了pass，其它的自己去發掘。

ExtJS的工具，
就是它：

使用工具來編譯你的JS，別想歪了，我知道JS是解釋性的，詳細的先看看這篇文章關於JSBuilder的作用：
http://hi.baidu.com/mallor/blog/item/5aec22f3e3dcbadc0b46e074.html

ExtJS的senchaSDKtools裏面還提供了theme的製作（命令行的？？！！！），如果嫌ExtJS審美疲勞了可以試試這個。沒玩過，所以不多解釋，這裏就告訴大家有這麼回事兒就行了。

關於大家最關心的數據
這個Store想必是最關心的吧？（好了，外面貌似下冰雹了我暈，樓頂啪啪的！沒時間去核實有北京的2011年七月二十六號晚上21：40：00左右的網友如果核實了留言證實一下）。
嗯，說到冰雹，我覺得轉載這篇文章的人應該注意一下告訴出處，這篇文章來自流水無心的ITEYE博客http://andy-ghg.iteye.com/

扯遠了，再回來繼續說，這個Store現在改變可不小，詳細的參看一下這個文章
[url src='http://www.sencha.com/blog/ext-js-4-anatomy-of-a-model/']Countdown to Ext JS 4: Anatomy of a Model[/url]
好了，我知道我很懶，但是我可以簡單說一下：modal代替了以往store中fields:[""]的功能，但是我沒用（實際使用有問題－ －！學藝不精），其實它是一個對象。。。對的是對象，MVC中的Model，好了，具體看API中關於MVC的介紹吧。
Store中有一個變化就是baseParams變程了extraParams，注意下。每一個Store必須（？是否必須我也不知道，不過我現在是這麼用的）要有一個Proxy且必須給一個type，現在的Store是這樣寫的：

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name',  type: 
'string'},
        {name: 'age',   type: 
'int'}
    ]
});

Ext.create("Ext.data.Store",{
    modal:"User",
    proxy{
        url : "xxxx.do",
        type : "ajax"
    }
})

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name',  type: 
'string'},
        {name: 'age',   type:
'int'}
    ]
});

Ext.create("Ext.data.Store",{
    modal:"User",
    proxy{
        url : "xxxx.do",
        type : "ajax"
    }
})

確實像那麼回事兒，但是我不買賬。。。在實際項目中我還是用我的fileds，在沒徹底搞明白之前，不太敢這麼弄 。

當然Store的改動遠遠不止這些，例如Proxy中新增了一個localStorage（Ext.data.proxy.LocalStorage）用於過渡到HTML5的localStorage等等。

Draw繪圖
這個東西喜歡嗎？我喜歡嘿嘿
ExtJS4中提供了繪圖，誇瀏覽器的，它內部實現了Canvas、SVG、VML等繪圖方法，所以不同的瀏覽器它會自動使用該瀏覽器支持的繪圖方式。支持IE6789、基於Gecko的瀏覽器(FF)、基於WebKit內核的瀏覽器(Chrome)。

FX
從ExtJS提供這個以來我就不怎麼用，原因很簡單，浪費我的資源。。。。在新的ExtJS中，提供了類似Flex中關於動畫的包方法Ext.fx.target.*，因爲我不怎麼用，所以不再闡述。


佈局
這裏的改變也很大，但是我覺得我在這個博客裏說再多也沒有你自己去運行它的例子來得要直觀。


好了，說了這麼多，當然沒有說完。。。。更多細節的改變的大家自己去發掘，推薦一篇文章《ExtJS 4.0 Developer Preview》，地址我忘了，網絡時代相信對你來說找到它不難。


最後做一下小小的廣告：
我自己寫的AS3（Flex）流程圖例子快要完工了～！以前提供了一個簡易的Demo版本，這次是經過重大修改後的（不是說以前有重大的BUG，而是以前的實在太難用－ －！），雖然是例子，但是如果您喜歡，完全可以用來做二次開發～！嘿嘿。下面是最新版的截圖：


目前提供了這些小組件：


最後的最後
從ExtJS 2.0一直用到4.0，從Flex 3用到Flex 4.5，感慨很多，在ExtJS成長的過程中我已漸漸的從前端轉向了後端，不是因爲我不再熱愛前端和RIA，而是因爲我覺得多方的瞭解與涉及能讓自己得到更好的昇華，目前專注j2ee開發，主要涉及Spring、Spring Security、CAS SSO、JMS ActiveMQ、Hibernate、jBPM、Oracle。
其它的包括C#、C++QT4、jQuery等等也裝模作樣的學了些，所以不要再討論某個語言某個框架的優劣，有這個時間可以學到很多很多東西。何必眼光這麼狹隘呢？，爭論太浪費精力。少點爭論多點實際付出。