http://www.hzuwando.com/Blog/MyBlogContent.aspx?user=luxiaoyong&id=79

基礎(chǔ)上的變化：?

兼容性?
ExtJS4最終會(huì)提供一個(gè)兼容ExtJS 3的解決方案。?

沙箱模式?
可是使用alias來(lái)為組件添加別名，類似以前的Ext.reg，不過(guò)alias會(huì)用不同的類別區(qū)分開(kāi)來(lái)，例如，widget.xxxxx和feature.xxxxx是不一樣的，雖然它們都是用alias來(lái)定義的，但是類別完全不同。?

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

創(chuàng)建新的對(duì)象?
現(xiàn)在ExtJS使用Ext.define函數(shù)來(lái)創(chuàng)建組件類，該函數(shù)還能實(shí)現(xiàn)自動(dòng)加載JS類（uses屬性，需設(shè)置Ext.Loader為開(kāi)啟詳見(jiàn)下文，看不懂看API），它會(huì)自動(dòng)的完成以前的ns（namespace）功能。例如下面?
Js代碼??
Ext.ns("Foo.bar");??
??
Foo.bar = Ext.extend(Ext.util.Observable,{??
? ?? ???//your code here??
});??
Ext.reg("foobar",Foo.bar);??

所以現(xiàn)在創(chuàng)建一個(gè)組件應(yīng)該是這樣的：?
Js代碼??
Ext.define("Foo.bar",{??
? ?? ???extend : "xxxxxx",??
? ?? ???alias : "widget.foobar"??
? ?? ???//your code here??
});??


現(xiàn)在ExtJS不再使用new關(guān)鍵字（當(dāng)然你想用也沒(méi)關(guān)系），而是推薦使用Ext.create函數(shù)來(lái)解決這個(gè)問(wèn)題，例如以往我們創(chuàng)建一個(gè)組件的代碼是?
Js代碼??
var win = new Ext.Window({??
? ?? ???//some options??
});??

而現(xiàn)在則是?
Js代碼??
var win = Ext.create("Ext.window.Window",{??
? ?? ???//some options??
});??


新的類加載方法--Class Loading?
現(xiàn)在ExtJS可以動(dòng)態(tài)加載JS文件（類）了，新的Ext.Loader類和一些其它的方法可以完成分別加載所需的JS文件，例如Ext.Loader里的setPath、require等方法函數(shù)可以做到動(dòng)態(tài)加載。?
如果要使用這個(gè)功能，你首先得啟用它：?
Js代碼??
Ext.Loader.setConfig({??
? ?? ?enabled: true,??
? ?? ?paths: {??
? ?? ?? ? 'My': 'my_own_path'??
? ?? ?}??
});??

path的意思是，當(dāng)前引用這個(gè)JS的HTML文件同級(jí)的my_own_path目錄被命名為My,所以以后該目錄下的所有類名為My.xxxx的類都能被動(dòng)態(tài)加載。?
例如以下文件目錄：?

在定義的時(shí)候就是：?
Js代碼??
Ext.Loader.setConfig({??
? ?? ?enabled: true,??
? ?? ?paths: {??
? ?? ?? ? 'NS': 'app'??
? ?? ?}??
});??

app/person文件夾中的類名為L(zhǎng)KPerson的定義代碼為：?
Js代碼??
Ext.define("NS.person.LKPerson", {??
? ? extend : "Ext.panel.Panel",??
? ?? ???alias : "widget.lkperson",//當(dāng)然，這個(gè)屬性不是必須的??
? ? border : false,??
? ?? ???initComponent : function(){??
? ?? ?? ?? ?? ? this.callParent(arguments);//這個(gè)arguments你懂，不懂Google??
? ?? ???}??
})??

注意一點(diǎn)的就是，NS.person.LKPerson中的LKPerson就是文件名稱（換句話說(shuō)文件名必須是LKPerson且必須在person目錄下）?

好了，下面看看動(dòng)態(tài)加載的兩種方式：?
require的用法如下：?
Js代碼??
Ext.require("Foo.bar");??
??
Ext.define("AA.bb.CC",{??
? ?? ???//some options??
});??


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

uses的用法如下：?
Js代碼??
Ext.define("AA.bb.CC",{??
? ?? ???uses:["Foo.bar"]??
});??


uses的意思是：在這個(gè)類（AA.bb.CC）在運(yùn)行過(guò)程中要用到Foo.bar這個(gè)類，用到的時(shí)候再加載。?

其它的就不多解釋，具體看API（這句話我最后說(shuō)一遍 ）?

混入類?
將一個(gè)類混入到另外一個(gè)類中，創(chuàng)建的時(shí)候一同創(chuàng)建：?
Js代碼??
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();??
})??


靜態(tài)方法?
現(xiàn)在所有的類（是所有的ExtJS類，Ext.define定義的）都提供靜態(tài)方法，可以很方便的定義：?
Js代碼??
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?
這個(gè)東西很時(shí)髦，看看用法：?
Js代碼??
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());??
});??

運(yùn)行以下看看會(huì)出現(xiàn)什么？是My Title，config會(huì)自動(dòng)生成getter和setter還有apply方法。?

Ext.env.Browser?
這個(gè)東西很好很強(qiáng)大。。。。記得以前有Ext.isIE、Ext.isFF等方法判斷瀏覽器，這次ExtJS 4不僅保留了以前的函數(shù)，還提供了更為強(qiáng)大Ext.env包來(lái)干這些事情，這個(gè)包下面還有其它兩個(gè)類：?
Ext.env.OS，顧名思義判斷操作系統(tǒng)的，印象中ExtJS3中好像也有，不過(guò)這次新增了一些操作系統(tǒng)（主要是移動(dòng)領(lǐng)域的操作系統(tǒng)）。?
Js代碼??
if (Ext.os.is.Windows) {??
? ???// Windows specific code here??
}??
??
if (Ext.os.is.iOS) {??
? ???// iPad, iPod, iPhone, etc.??
}??


Ext.env.FeatureDetector,這個(gè)絕對(duì)是新加的，主要用于判斷HTML5和CSS3的，例如?
CSS3/動(dòng)畫(huà)/轉(zhuǎn)換
Canvas/ SVG/ VML
觸摸屏是否可用/方向
地理位置（HTML5的東西相信不陌生吧？）
SqlDatabase
WebSockets
History
音頻
視頻

Lang包的修改?
不知道lang是什么意思？（想想java.lang.String和java.lang.Number吧）?
現(xiàn)在ExtJS 4一直在為新的ECMAScript標(biāo)準(zhǔn)做準(zhǔn)備，這就是為什么要有這個(gè)包存在的原因，新的ECMAScript標(biāo)準(zhǔn)大家可以在ActionScript3中詳細(xì)看看，AS3基本上是遵循了下一代ECMAScript標(biāo)準(zhǔn)的，例如數(shù)據(jù)類型String、Number、Array、uint等等，ExtJS 4為了能與下一代的ECMAScript標(biāo)準(zhǔn)兼容，提前提供了這些東西的JS實(shí)現(xiàn)。?

Ext.Function?
這個(gè)東西不知道大家平時(shí)用不用（也許大家用了沒(méi)察覺(jué)到），我是經(jīng)常用的。例如在以往的ExtJS版本中的代碼：?
Js代碼??
function foo(){??
? ?? ? //這里??
}.createDelegate(scope,arguments);??

現(xiàn)在變成了（這里使用了一個(gè)綜合的例子，大家可以重點(diǎn)看看bind的用法）：?
Js代碼??
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)();//后面的括號(hào)你懂??
? ? //如果要傳遞參數(shù)可以以數(shù)組的形式放入，例如這樣：??
? ? //Ext.bind(fun,foo,["私はセックスを必要としない、政府は毎日私をファック！"])();??
});??

好了，我承認(rèn)我有點(diǎn)那啥，不過(guò)希望不影響你繼續(xù)讀下去的興趣。?

相同的還有?
ExtJS 3中的?
Js代碼??
myFunction.defer(1000, scope);??


變成了4中的?
Js代碼??
Ext.defer(myFunction, 1000, scope);??

還有callBack變成了pass，其它的自己去發(fā)掘。?

ExtJS的工具，?
就是它：?

使用工具來(lái)編譯你的JS，別想歪了，我知道JS是解釋性的，詳細(xì)的先看看這篇文章關(guān)于JSBuilder的作用：?
http://hi.baidu.com/mallor/blog/ ... dcbadc0b46e074.html?

ExtJS的senchaSDKtools里面還提供了theme的制作（命令行的？？！！！），如果嫌ExtJS審美疲勞了可以試試這個(gè)。沒(méi)玩過(guò)，所以不多解釋，這里就告訴大家有這么回事兒就行了。?

關(guān)于大家最關(guān)心的數(shù)據(jù)?
這個(gè)Store想必是最關(guān)心的吧？（好了，外面貌似下冰雹了我暈，樓頂啪啪的！沒(méi)時(shí)間去核實(shí)有北京的2011年七月二十六號(hào)晚上21：40：00左右的網(wǎng)友如果核實(shí)了留言證實(shí)一下）。?
嗯，說(shuō)到冰雹，我覺(jué)得轉(zhuǎn)載這篇文章的人應(yīng)該注意一下告訴出處，這篇文章來(lái)自流水無(wú)心的ITEYE博客http://andy-ghg.iteye.com/?

扯遠(yuǎn)了，再回來(lái)繼續(xù)說(shuō)，這個(gè)Store現(xiàn)在改變可不小，詳細(xì)的參看一下這個(gè)文章?
[url src='http://www.sencha.com/blog/ext-js-4-anatomy-of-a-model/']Countdown to Ext JS 4: Anatomy of a Model[/url]?
好了，我知道我很懶，但是我可以簡(jiǎn)單說(shuō)一下：modal代替了以往store中fields:[""]的功能，但是我沒(méi)用（實(shí)際使用有問(wèn)題－ －！學(xué)藝不精），其實(shí)它是一個(gè)對(duì)象。。。對(duì)的是對(duì)象，MVC中的Model，好了，具體看API中關(guān)于MVC的介紹吧。?
Store中有一個(gè)變化就是baseParams變程了extraParams，注意下。每一個(gè)Store必須（？是否必須我也不知道，不過(guò)我現(xiàn)在是這么用的）要有一個(gè)Proxy且必須給一個(gè)type，現(xiàn)在的Store是這樣寫(xiě)的：?

Js代碼??
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"??
? ? }??
})??
確實(shí)像那么回事兒，但是我不買(mǎi)賬。。。在實(shí)際項(xiàng)目中我還是用我的fileds，在沒(méi)徹底搞明白之前，不太敢這么弄。?
當(dāng)然Store的改動(dòng)遠(yuǎn)遠(yuǎn)不止這些，例如Proxy中新增了一個(gè)localStorage（Ext.data.proxy.LocalStorage）用于過(guò)渡到HTML5的localStorage等等。?
Draw繪圖?
這個(gè)東西喜歡嗎？我喜歡嘿嘿?
ExtJS4中提供了繪圖，夸瀏覽器的，它內(nèi)部實(shí)現(xiàn)了Canvas、SVG、VML等繪圖方法，所以不同的瀏覽器它會(huì)自動(dòng)使用該瀏覽器支持的繪圖方式。支持IE6789、基于Gecko的瀏覽器(FF)、基于WebKit內(nèi)核的瀏覽器(Chrome)。?

FX?
從ExtJS提供這個(gè)以來(lái)我就不怎么用，原因很簡(jiǎn)單，浪費(fèi)我的資源。。。。在新的ExtJS中，提供了類似Flex中關(guān)于動(dòng)畫(huà)的包方法Ext.fx.target.*，因?yàn)槲也辉趺从?#xff0c;所以不再闡述。?
布局?
這里的改變也很大，但是我覺(jué)得我在這個(gè)博客里說(shuō)再多也沒(méi)有你自己去運(yùn)行它的例子來(lái)得要直觀。?
好了，說(shuō)了這么多，當(dāng)然沒(méi)有說(shuō)完。。。。更多細(xì)節(jié)的改變的大家自己去發(fā)掘，推薦一篇文章《ExtJS 4.0 Developer Preview》，地址我忘了，網(wǎng)絡(luò)時(shí)代相信對(duì)你來(lái)說(shuō)找到它不難。

---

總結(jié)

以上是生活随笔為你收集整理的extjs3.0与extjs4.0区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。