本節書摘來自異步社群《ext js實戰》一書中的第1章，第1.3節，作者：【美】jesus garcia著，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視
ext js作為一個架構，不僅提供了ui部件，還提供了許多其他特性。這些内容可以分成6大部分，即ext js核心、ui元件、web遠端調用、資料服務、拖放以及通用工具。圖1-4說明了這6個部分。
圖1-4 ext js的6大部分，即ext js核心、ui元件、web遠端調用、資料服務、拖放及通用工具
了解這6大部分之間的差別以及各自的用途，有助于開發應用程式時劃分邊界，是以下面先讨論這6個部分。
ext js核心
第一個功能集就是ext js核心，這一部分包括了許多基本功能，包括ajax通信、dom操作和事件管理等基礎功能。架構裡的其他東西都依賴于這個核心，反之不然，也就是核心并不依賴于其他東西。
更進一步了解ext js核心
ext js核心是一個函數庫，屬于ext js基礎功能的一部分，可以看成與jquery、prototype和scriptaculous等價。
ui元件
ui元件包括所有可以與使用者進行互動的部件。
web遠端調用
web遠端調用是一種讓javascript可以（遠端地）執行伺服器端定義的方法的一種手段，也叫做遠端過程調用或者rpc。對于那些希望把伺服器端的方法暴露給用戶端，又不想被煩人的ajax方法管理所困擾的開發環境來說，web遠端調用是很友善的。
進一步了解ext js direct
因為direct是一個聚焦于伺服器端的産品，本書中不會涉及相關内容。ext js有許多線上資源可以學習direct，包括許多流行的伺服器端解決方案的示例。
資料服務部分關注的是資料需求，包括對資料的提取、解析以及把資訊加載到資料存儲器（store）。利用ext js的資料服務類，可以讀取數組、xml以及json（javascript serialized object notation，這種資料格式很快就會成為客戶-服務端之間的通信标準）。而給ui元件提供資料的是資料存儲器。
拖放
拖放很像是ext js内的一個迷你架構，可以對頁面上的ext js元件或者任意html元素進行拖放操作。它包含了支援完整的拖放操作需要的所有必需元素。拖放本身是一個很複雜的主題，本書會在第13章和第14章完整地讨論這個主題。
工具
工具部分包含一些很酷的工具類，它能幫助開發人員更容易地處理一些常見任務。ext.util.format就是這樣的一個例子，這個類讓開發人員可以容易地對資料進行格式化或者轉換。另外一個優雅的工具是css單體，可以用這個工具建立、更新、交換以及删除樣式表，同時要求浏覽器更新其緩存。
現在，已經對架構的主要功能劃分有了大概的了解，接下來介紹一些ext js所提供的常用ui部件。
1.3.1 容器和布局一覽
盡管在第3章還會更詳細地探讨這個主題，現在也應該花點時間了解容器和布局，容器和布局這兩個術語會在這本書中大量出現，是以在繼續深入之前應該對它們有些最基本的了解。之後，我們再繼續探讨ui函數庫中那些可見的部件。
容器
容器本身也是一個部件，不過它是可以管理一個或者多個子元素的部件。而子元素就是被容器或者父元素所管理的任何一個部件或者元件，這就形成了父子關系。在api部分已經見到實際例子了。tabpanel本身就是一個容器，它管理着一個或者多個子元素，這些子元素可以通過頁籤通路。務必記住容器這個術語，等到更進一步學習如何使用架構中的ui單元時，會經常用到這個術語。
布局
容器是通過布局完成對容器所包含的子元素的可視化擺放的。ext js中有12種布局可供選擇，第5章将更加詳細地讨論這些布局，并分别示範每一種布局。現在已經對容器和布局有了一個宏觀的了解，現在來看一些實際的容器。
在圖1-5中，看到的是container的兩個子類——panel和window，每一個都有父子關系。
圖1-5 這裡有兩個父容器，panel（左邊）和window（右邊），管理子元素，嵌套子元素
圖1-5中的panel（左邊）和window（右邊）每個都有兩個子元素。每個父容器的child panel 1包含的都是html内容，而child panel 2用的都是簡單的containerlayout布局，它們又管理着一個子panel。containerlayout布局是其他所有布局的基礎類。這個父子關系就是ext js中所有ui管理的關鍵，本書會反複強化和使用這個關系。
現在知道容器是管理子元素的，使用布局進行可視化的擺放。現在已經掌握了這些重要的概念了，繼續讨論其他的實際容器。
1.3.2 實際應用中的其他容器
在學習容器時，已經看過了panel和window。圖1-6顯示了其他一些常用的container的子類。
圖1-6 container常用的子類——formpanel、tabpanel、fieldset、quicktip以及使用的布局，我們會在第6章實作這個頁面，到時就會用到表單
在圖1-6中，可以看到formpanel、tabpanel、fieldset、quicktip這些部件。formpanel使用baiscform類對一個表單中的字段及其他子元素進行了封裝。
如果從父子的角度來看，formpanel管理了3個子元素：兩個fieldset的執行個體和一個tabpanel的執行個體。
fieldset一般用于在表單中顯示字段，就像html中典型的field标簽一樣。這兩個fieldset也都管理着子元素，即文本字段。tabpanel管理着3個直接的子元素（頁籤）；第一個頁籤（電話号碼）中也管理着許多子元素，這些都是文本字段。quicktip是用于顯示的，當滑鼠懸停在某個元素上時可以顯示出幫助文本，不過它并不屬于任何一個ext js元件的孩子。
将在第6章花些時間來打造這個相對複雜的ui，那時讀者會更進一步地學習formpanel。現在，繼續看看架構必須提供的展示資料的部件。
1.3.3 網格、dataview和listview
現在已經知道了架構中的資料服務部分是負責資料的加載和解析工作的。對資料存儲器來說，它的最大使用者就是gridpanel和dataview了，以及dataview的子類listview。圖1-7所示為ext js的gridpanel在現實應用中的的一個截屏。
圖1-7 ext js sdk所提供的buffered grid示例中的gridpanel
gridpanel是panel的一個子類，它把資料以表格的樣式展現出來，但是它的功能又遠遠地超出了傳統的表格，還可以排序，可以調整大小，可以移動列頭，以及類似rowselectionmodel和cellselectionmodel的選擇模式。完全可以按照自己的意願定義它的外觀和體驗，它還可以和pagingtoolbar一起使用，進而對大資料集可以通過分區并按頁顯示。gridpanel自己也有子類，例如editorgridpanel，這個類所建立的資料表格是允許使用者對表格中的資料進行編輯的，編輯時又可以利用ext js的任何一種資料輸入部件。
用表格顯示資料非常棒，不過如果每一行資料都包含很多的dom元素，那麼計算代價就過于昂貴了。想要解決這個問題，可以把gridpanel和pagingtoolbar合起來一起使用，或者使用一個更輕量級的部件來顯示資料，這些部件包括dataview以及它的子類，listview，如圖1-8所示。
dataview類從資料存儲器（store）中擷取資料，然後再根據一個模闆（template）把這些資料繪制到螢幕上，同時它還提供一個簡單的選擇模型。ext js的模闆其實就是一個dom工具，可以建立一個模闆，在裡面放上代表資料元素的占位符，這些占位符最後會被來自于資料存儲器中的記錄填充，并充實dom内容。在圖1-8中，dataview（左側）顯示的就是來自于資料存儲器中的資料，這些資料包含了對圖檔的引用。它所使用的是一個已經預先定義好的模闆，這個模闆中有圖檔标簽，用每個記錄來填充圖檔的區域。于是模闆就對每一條記錄都填充了一個圖檔标簽，最後就是一個非常漂亮的照片拼圖了。dataview可以用于顯示資料存儲器中的任何内容。
圖1-8 ext js sdk示例中的dataview（左）和listview（右）
圖1-8右側所示的listview也是用一種表格的樣式來顯示資料的，不過它是dataview的子類。如果不想用gridpanel的一些特性，例如排序、可調整的列，但是又想用表格化的形式展示資料，那麼dataview确實是一個不錯的選擇，它可以避免gridpanel的笨重。
要在螢幕上展現資料，gridpanel和dataview絕對是最關鍵的工具，不過它們都有一個局限。它們所顯示的都隻能是清單形式的記錄。它們都不能顯示階層化的資料，而這正是treepanel大展身手的地方。
1.3.4 模仿一個treepanel和葉子
treepanel這個部件可以說是所有使用資料的ui部件中的一個異類，因為它所使用的資料并不是來自于資料存儲器的。相反，它使用的是借助data.tree類實作的階層化的資料。圖1-9所示為ext js的treepanel部件的一個示例。
圖1-9中的treepanel所顯示的是安裝目錄的父子關系資料。treepanel會利用treeloader通過ajax遠端擷取資料，也可以通過配置使用浏覽器端的資料。還可以通過配置支援拖放功能，而且它有自己的選擇模型。
前面在讨論容器的時候，已經看到了用在表單中的textfield。接下來，我們來看看架構所提供的其他一些輸入字段。
1.3.5 表單的輸入字段
在ext js的調色闆上一共有8個輸入字段，從最簡單的textfield（這個已經介紹過了）到combobox和htmleditor這類複雜的字段。圖1-10所示為一些可用的ext js表單字段。
有一些表單輸入字段看起來就是對應的原始html字段的美化版本，如圖1-10所示。不過二者的相似之處也就到此為止。ext js表單字段還另有一番風光！
每個ext js字段（除了htmledirot）都自帶了一套工具，可以進行類似get和set的操作、把字段置成無效狀态、重置字段内容、對字段進行校驗等一系列操作。也可以通過正規表達式或者自定義的校驗方法進行自定義校驗，這就可以對錄入到表單的資料進行完整的控制了。而且可以在使用者錄入資料的同時就進行資料的校驗，進而為使用者提供實時的回報資訊。
textfield和textarea
textfield和textarea類可以看成是與之對應的普通的html字段的擴充。numberfield是textfield的一個子類，也是一個很好用的類，因為它通過正規表達式來保證使用者隻能輸入數字。通過使用numberfield，可以配置小數的精度以及指定錄入值的範圍。與其他的字段相比，combobox和timefield兩個類需要更長的篇幅進行講解，是以現在先暫時跳過這兩個類，稍後再介紹它們。
radio和checkbox
與textfield類似，radio和checkbox這兩個輸入字段也是對舊版本的radio和checkbox的擴充，不過它擁有所有的ext js元素管理的全部優雅性，并且有友善的類建立自動布局管理的checkbox和radiogroup。圖1-11所示的就是如何用複雜的布局對ext js的checkbox和radiogroup進行配置的簡單例子。
htmleditor
html編輯器是個wysiwyg工具，它就像打了興奮劑的textarea一樣。htmledirtor利用的是目前浏覽器的html編輯功能，可以把它看作是字段的一個異類。因為它天生的複雜性（使用了iframe和其他東西），是以沒有諸如校驗等許多功能，也不能被辨別成無效狀态，關于這個字段還有更多的内容要讨論，這些讨論都留到第6章。不過現在，我們要再回到combobox和它的子類timefield。
combobox和timefield
combobox輕而易舉地就成為最複雜的可配置的表單輸入字段之首。它可以模拟傳統的下拉選擇框或者可以通過資料存儲器使用遠端的資料集。可以配置文本的自動補齊，也叫做輸入探測，可以在使用者輸入時進行遠端或者本地的資料過濾。也可以使用使用者自己的模闆，還可以自定義下拉區域中的清單，也叫做listbox。圖1-12所示為一個自定義的combobox的實際例子。
在圖1-12中使用了一個自定義的組合框來搜尋ext js論壇。這個combobox用一個清單框顯示文章的标題、日期、作者以及内容片段等的内容。因為資料集範圍太大，是以還配置了一個翻頁工具欄，使用者可以在結果資料中前後翻頁。因為combobox是高度可配置的，還可以在結果資料集中加上圖檔，這樣就可以更漂亮地展現結果了。
好了，這就是我們的ui之旅的最後一站了。現在會把其他的一些ui元件快速的浏覽一遍。
1.3.6 其他部件
還有一批ui部件也很優秀，它們并不屬于常用的元件，不過對于一個龐大的ui計劃來說卻起着重要的作用。如圖1-13所示，我們來看看有哪些ui部件，以及它們有哪些功能。
工具條（toolbar）
工具條本身也是一個部件，不過差不多可以把任何其他部件都塞進去。開發人員通常會把菜單和按鈕放進去。在讨論自定義的combobox時，已經看過toolbar的子類，即pagingtoolbar。panel以及差不多它的任何子類都可以把這些工具欄放在内容區域的頂部或者底部。button部件是普通的html按鈕的美化版本，可以帶有圖示和文本。
菜單（menu）
可以通過單擊工具條上的一個按鈕的方式顯示菜單，或者根據需要在螢幕的任意x、y坐标處顯示菜單。典型的菜單包括的都是菜單項，例如上面顯示的項目和帶顔色的菜單條目，菜單項也可以包含像combobox這樣的部件。
消息框（messagebox）
messagebox是一個工具類，有了這個類以後，就可以很容易地給使用者提供回報資訊，而無須再使用一個ext.window的執行個體了。圖1-13所示的執行個體中，消息框中用一個動态的progressbar向使用者顯示加載的進度。
滑動條（slider）
slider是一個通過拖拉搖桿來改變值的部件。可以用圖檔和css對滑動條進行美化，并對它的外觀進行定制。可以限制滑動條的搖桿隻能以遞增的方向移動。在這個例子中，滑動條的搖桿上帶了一個tooltip，它可以在使用者移動柄時顯示滑動的值。除了預設的水準方向，滑動條也可以配置成垂直的。
現在，我們知道ext js是如何通過一大堆的部件幫助我們完成任務了。我們可以推薦大家都使用ext js來開發應用程式，無須接觸哪怕少量的html，或者也可以把它內建到已有的站點中。現在我們對整個架構有了一個自頂向下的考察，包括ui之旅。不過目前我們所讨論的這些内容是自從ext js 2.0以來就有的。接下來讨論ext js 3.0中有哪些新東西。