前言
做前端開發也很長時間了，從寫基本的JS到JQ，從easyui、jq-ui等簡單的UI插件到自己寫插件也經歷過不少。目前因項目需要，要用到Extjs做前端，於是用了最新的4.0.7版本。雖然以前也接觸過Extjs，但在一段時間的開發過程中依舊感覺到各種無力,特別是在Extjs4.X版本改動較大的情況下，很多東西已經不能只靠百度去尋找了（找到也沒用）。在網上關於Extjs4.X的東西少之又少，要么就僅限於官方的那幾個demo。在同事和朋友的慫恿下，小弟不才願意將開發過程中所學到的，用到的，一一記錄下來，跟大家一起分享。同時也希望通過博客園能吸引到大牛，幫助小生解決一下一些頭疼的問題。
聲明:文中有部分資料是來源與網上查找，若是有轉載聲明則本人會注明，若沒有，則是無法獲知來源。本人不接受任何形式的跨省。
國際慣例先獲取開發包
首先在http://www.sencha.com/products/extjs/download/頁面，點擊“download for Ext JS 4.0.7”下載ext開發包。
下載后解壓，亂78遭的東西忒多了，大概的解釋下：
- builds目錄是Extjs壓縮后的代碼，體積更小，加載更快。
- docs是Extjs的文檔，包括Ext的Api，必備工具。
- example是官方的示例，學習就從研究這里面的代碼開始。
- locale是多國語言包，ext-lang-zh_CN.js是簡體中文。（在項目中如果覺得開發包臃腫，可以把除了zh-cn外的都刪除）
- overview是Extjs功能描述。
- pkgs是Extjs各部分功能的打包文件。
- resource是Extjs中要用到的圖片和樣式表。
- src目錄是未壓縮的源代碼目錄。
- bootstrap.js是ExtJS庫的引導文件, 通過參數可以自動切換ext-all.js和ext-all-debug.js。
- ext-all.js文件是ExtJS的核心庫,是必須要引入的。
- ext-all-debug.js文件是ext-all.js的調試版。
新特性
既然要用新的版本，那必然有用新版本的意義。Extjs4.X的版本為我們提供了什么新的便利呢？
1 動態加載和類定義
Extjs4.0引入了Ext.define方法，可以通過類的字符串名定義和繼承類，這就避免了由於類不存在而報錯。類管理器會自動檢查類之間的依賴關系。示例：
Ext.define('MyDataModel',{
extend: 'Ext.data.Model',
fields:[
{name: 'id', type: 'string'},
{name: 'name', type: 'string'},
{name: 'email', type: 'string'},
{name: 'phone', type: 'string'}
]
});
以上代碼聲明了一個叫'MyDataModel'的類，他繼承了Ext.data.Model。如何調用呢，再看下面代碼：
var myStore = Ext.create('Ext.data.Store', {
model: 'MyDataModel',
proxy: {
type: 'ajax',
url : 'data.xml',
reader: {
type: 'json',
root: 'data'
}
}
});
myStore我們可以理解為一個數據的存儲器，以上的代碼可以理解為“從data.xml這個路徑獲取了json形式的數據，數據的根節點為'data'”。
大家應該可以看出來了，Model就像是定義了一個空表，Store為這個空表填充了數據。具體的使用，會在Grid的章節中講到。
2 強大的圖表和圖形
具體的就不述說了，可以在example/charts這個路徑下看到很多demo。常用的柱狀圖，餅狀圖，波形圖，甚至還有三維圖形都有。簡單的截一張圖：
順便值得一體的是，如果部分圖形或者其他demo看不到或報錯的話，請用IIS建一個虛擬目錄，將demo都放進虛擬目錄中去。
不一樣的HelloWorld
好吧我實在是不想寫HelloWorld，但經過各種批評教育后，我表示深深的反省，HelloWorld是程序員的靈魂啊，贊美HelloWorld。
首先引用JS：
<link rel="stylesheet" type="text/css" href="../ext-4.0.7/resources/css/ext-all.css" /> <script type="text/javascript" src="../ext-4.0.7/bootstrap.js"></script> <script type="text/javascript" src="../ext-4.0.7/locale/ext-lang-zh_CN.js"></script>
bootstrap.js會自行引用ext-all.js文件。接下來貼JS代碼：
<script type="text/javascript">
Ext.onReady(function(){
Ext.MessageBox.alert("Hello World","Hello World!")
});
</script>
效果圖：
有神馬不一樣的？沒坑爹，不一樣的在下面。申明一個json對象：
var config={
title:'HelloWorld',
msg:'確實有點不一樣的HelloWorld'
};
然后將這段替換剛剛的alert()方法：
Ext.MessageBox.show(config);
運行后看到結果的同學請鼓掌。
聰明的同學或許已經想到了，json是常用的數據傳輸手段，而Extjs支持json配置的方式，那么前台只需要放幾句簡單的代碼，就可以通過ajax的方式用后台代碼控制前台的頁面輸出的內容。關於該應用的強大我們會在后面慢慢的體現。
報錯腫么辦？
最后教給大家一些調試的方法，前端調試最犀利的莫過於firefox的firebug，必備利器。
眾所周知，JS調試是一件惡心到爆的事情，常常因為漏寫一個符號、寫錯字母導致無法運行，而報錯信息又讓人無法正確定位錯誤原因，特別是用JQ，Ext等庫，調試起來更是讓人欲哭無淚。以下是我故意寫錯后IE報錯：
我頁面上根本沒有什么buttons，完全無法理解這是什么錯誤。
再用firebug打開，選中“控制台”：
錯誤很明確了，位置也知道了。
沒錯，我在頁面上亂打了個ccc，依賴於ext-all-debug.js將錯誤輸出到了控制面板上，我很輕易的找到了錯誤。回想一下你在幾千行代碼中找錯誤時抓狂的心情吧，表示能夠肉眼找出來的朋友肯定是“大家來找茬”的高手。
順便值得一說的是，firebug控制台也可以自定義一些調試，代碼：
console.log("輸出在控制台");
運行后你會在控制台找到輸出的內容：
以前相信很多朋友都是用alert()來彈出消息用以調試，在遇到循環輸出需要跟蹤每次循環的變化的時候，請問你們是不是一直左手大拇指敲空格呢？可憐下鍵盤吧，它是程序員的朋友。
小結
本人文筆有限，內容也沒有什么大局觀，只是站在程序猿的角度上寫了些小技巧。從下個章節開始會以項目中的實例來講述Ext各個組件的使用以及與后台的結合應用（主要是MVC框架的后台）。有錯誤歡迎指正。
PS：頂一下湯姆大叔的深入理解JS系列，您是偶像~