本節書摘來自異步社群《ext js實戰》一書中的第1章，第1.4節，作者：【美】jesus garcia著，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視
ext js 2.0中引入的一些變化是颠覆性的，這就導緻從級到2.0相當困難。這主要是因為這一版引入了一個更加現代的布局管理器以及一個嶄新的、健壯的元件層次，許多ext js 1.x的代碼都會是以而崩潰。值得慶幸的是，由于ext js 2.0的良好的工藝設計，從ext js 2.0到3.0的移植就非常容易了。盡管ext js 3.0新增的内容并不怎麼神奇，不過最新的版本還是可圈可點的，有些新增的特性還是值得讨論的。
1.4.1 ext js通過direct完成遠端操作
web遠端調用是一種可以在javascript中很容易地執行伺服器端定義的方法的機制。如果希望把伺服器端的方法暴露給用戶端，但又不希望和ajax的連接配接管理打交道，用這種方法就非常友善了。ext.direct會替我們管理ajax請求，并充當用戶端的javascript與任意一種伺服器端語言之間的橋梁。
這個功能有很大的好處，包括對方法的集中管理以及方法的統一。架構中有了這個技術後就能保證客戶間的一緻性，例如資料類。既然說到這裡，我們就看看這個新增的ext.direct給資料類帶來了哪些新的類。
1.4.2 資料類
ext.data這個類是整個架構中處理所有資料的中樞。這個資料類負責資料管理的方方面面，包括資料的抽取、讀、解析、建立記錄，以及把記錄加載到資料存儲器。通過新加的direct，ext js還同時增加了幾個好用的data類，包括directproxy和directstore，進一步簡化了與web遠端調用的整合。
接下來，看看架構背景的變化和新增的一些ui部件。
1.4.3 新的布局
在ext js 3.0中出現了6個新的布局，包括autolayout、menulayout、boxlayout、vboxlayout和hboxlayout。menulayout是對2.0版中菜單項的組織形式的一個改進。類似地，toolbarlayout也給toolbar增加了重要的特性，例如溢出管理，如圖1-14所示。這兩種布局既不是給它們的目标部件用的，也不是給最終使用者用的。
圖1-14 新的toolbarlayout負責檢查工具欄的大小，并且在菜單項要發生溢出時建立一個菜單存根
如圖1-14所示，toolbarlayout會檢測到工具條中内容發生了溢出，然後會自動地建立一個菜單來包括并羅列剩餘的項目，正是menulayout的變化才給這個功能提供了支援。
boxlayout類是一個抽象類，也就是說，它并不是給最終使用者使用的，而是為vboxlayout和hboxlayout類提供基本功能。vboxlayout和hboxlayout是對最終使用者可用的，它是布局清單有用的補充。hboxlayout使得能夠在水準方向上拆分容器的内容區域，而vboxlayout的功能類似，不過是在垂直方向上拆分，如圖1-15所示。
許多有經驗的ext js開發人員可能會覺得hboxlayout看起來像是columnlayout。盡管從提供的功能來看，二者确實相似，不過hboxlayout的功能遠超過了columnlayout的功能，它可以根據權重把它的子元素在垂直或者水準方向上拉伸，這也叫做彈性收縮。不過和columnlayout比起來，子元素不會在容器内折行。這兩種布局把架構的布局功能引領到了一個新的高度。
除了在布局上的變化，gridpanel的支援類columnmodel也有一些根本的變化。下面先看看這些變化，并弄清楚為什麼這些變化有助于我們的開發。
1.4.4 網格中columnmodel的增強
gridpanel部件用columnmodel控制列的組織方式、大小設定以及顯示。在ext js 3.0之前，每個列都是一個配置對象清單，這個清單用于columnmodel。
對于columnmodel中的每個列，都可以通過自定義的渲染器增強或者修改資料的顯示方式，所謂渲染器其實就是一個方法，每一列的每個資料點都會調用這個方法，然後傳回格式化的資料或html。這也就是說，如果要把日期格式化或者以某種特定方式進行顯示，就必須自己配置。後來人們發現這種工作實在太多了。是以到了這一版，columnmodel就朝着簡化我們工作的方向進行了改變。
columnmodel中的單個列進行了抽象，并建立了一個叫做grid.column的全新的類。從此開始，許多好用的column子類也就出現了，包括numbercolumn、bolleancolumn、templatecolumn以及datecolumn，每一種都可以按使用者的要求來顯示資料。例如可以使用datecolumn并指定一個格式來顯示格式化的日期資料。另一個可喜的變化是templatecolumn，可以把xtemplate用于gridpanel，這樣就可以很容易地把資料變成自己的html片段。不管使用哪一種column的子類，都無須自定義渲染器。當然需要的時候也可以自定義渲染器。
許多應用程式都需要用表格的形式展示資料。盡管gridpanel是個不錯的方案，但是對于隻需要很少甚至完全不需要使用者互動的普通資料展示來說，計算的代價還是太大。這時，listview或dataview的擴充就有了用武之地了。
1.4.5 listview
有了架構的這些新特性後，現在再用表格的形式展示資料就沒有性能的損失了。圖1-16顯示了listview的實際效果。盡管看起來和gridpanel一樣，但是為了保證最佳性能，這裡犧牲了例如拖放、列的重新排序以及用鍵盤導航等功能。這主要是因為listview并沒有例如之前讨論的columnmodel之類的精緻的、功能豐富的支援類。
用listview來顯示資料可以保證dom操作的快速響應，不過别忘了它沒有類似gridpanel的那些功能。到底用哪一個取決于應用程式的需求。
如果在螢幕上顯示的資料總是文本資料，ext js确實不錯，不過它缺少圖形化的資料展示方式。我們看看ext js 3.0中又有些什麼變化。
1.4.6 ext js中新增的圖表功能
ext js 2.0中缺少的就是圖表。值得慶幸的是，開發團隊對社群的抱怨沒有不聞不問，在ext js 3.0中引入了圖表。這也是一個非常好的擴充，并且遵循了ext js的布局模型。
除了圖1-17所示的折線圖（line）和柱狀圖（colwn）處，架構還提供有條形圖（bar）、餅圖（pie）以及笛卡兒坐标cartesian，圖表滿足資料可視化的需求。
圖1-17 這些圖表給架構帶來了豐富的趨勢資料，不過要注意這個新挂架需要flash
現在所有的鋪墊都做得差不多了。不過，還要先把架構下載下傳下來并配置好，然後再讨論開發。