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

基礎上的變化：?

兼容性?
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）功能。例如下面?
Js代碼??
Ext.ns("Foo.bar");??
??
Foo.bar = Ext.extend(Ext.util.Observable,{??
? ?? ???//your code here??
});??
Ext.reg("foobar",Foo.bar);??

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


現在ExtJS不再使用new關鍵字（當然你想用也沒關系），而是推薦使用Ext.create函數來解決這個問題，例如以往我們創建一個組件的代碼是?
Js代碼??
var win = new Ext.Window({??
? ?? ???//some options??
});??

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


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

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

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

app/person文件夾中的類名為LKPerson的定義代碼為：?
Js代碼??
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的用法如下：?
Js代碼??
Ext.require("Foo.bar");??
??
Ext.define("AA.bb.CC",{??
? ?? ???//some options??
});??


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

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


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

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

混入類?
將一個類混入到另外一個類中，創建的時候一同創建：?
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();??
})??


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

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

Ext.env.Browser?
這個東西很好很強大。。。。記得以前有Ext.isIE、Ext.isFF等方法判斷瀏覽器，這次ExtJS 4不僅保留了以前的函數，還提供了更為強大Ext.env包來干這些事情，這個包下面還有其它兩個類：?
Ext.env.OS，顧名思義判斷操作系統的，印象中ExtJS3中好像也有，不過這次新增了一些操作系統（主要是移動領域的操作系統）。?
Js代碼??
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版本中的代碼：?
Js代碼??
function foo(){??
? ?? ? //這里??
}.createDelegate(scope,arguments);??

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

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

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


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

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

ExtJS的工具，?
就是它：?

使用工具來編譯你的JS，別想歪了，我知道JS是解釋性的，詳細的先看看這篇文章關于JSBuilder的作用：?
http://hi.baidu.com/mallor/blog/ ... dcbadc0b46e074.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是這樣寫的：?

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"??
? ? }??
})??
確實像那么回事兒，但是我不買賬。。。在實際項目中我還是用我的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》，地址我忘了，網絡時代相信對你來說找到它不難。

---

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。