1.4 Ext JS體系結構

在決定使用或學習Ext JS之后，我們得了解一下Ext JS的整個體系結構。它有一百多個類、幾十個組件和眾多的方法，為客戶端開發提供了幾乎所有必要的功能。

1.4.1 體系結構

從整體上來講，Ext JS可以分成4大模塊，每個模塊又可以分成很多小模塊，它采用了分層架構方式。從圖1.8中可以看出，Ext JS的整體架構分成了4個部分：核心、元素、數據和組件。這4大部分采用分層梯形結構，核心功能是為元素擴展、數據處理和UI組件服務的，它是Ext JS最基礎的實現。元素擴展則是對JavaScript中的DOM元素進行擴展，使其使用起來更為方便。數據處理實現Ext JS和服務器間數據傳遞交互的功能。開發者只要使用UI組件及數據處理的功能就可以完成應用系統的絕大多數任務。下面就簡要分析其各個模塊。

1.4.1.1 核心功能

Ext JS最底層架構的核心功能包含事件處理、模板功能、繼承特性和原生對象擴展等。它使得Ext JS組件有著良好的擴展性、易用性及代碼重用性。

Ext既是命名空間，又是靜態類，提供統一的入口。該入口實現了繼承、瀏覽器兼容等常用功能。

事件機制和模板機制是Ext JS組件架構中的兩大重要機制，它們的含義分別如下。

◆ 事件機制：通過事件的方法來擴展定制組件。

◆ 模板機制：通過模塊化內容來實現組件的重用。

Ext JS核心功能還對如Function、Date、String、Array及定時任務等原生對象或原生方法進行了擴展，提供了強大的開發功能，其具體內容將在第3章、第4章和第7章進行詳細的講解。

1.4.1.2 數據處理

數據處理是客戶端數據統一操作的接口。不管數據來自何方，都可以通過該接口進行統一操作。操作的數據是解析器解析代理請求的原始數據之后的二維表數據。通過“代理—解析—儲存—回寫”4步，呈現給開發者的數據是數據庫的二維表數據，可以對該二維表數據進行排序、統計、查詢、更新等操作，最后能方便地通過回寫將其保存到服務器中。

在目常的Ext JS實現中，并沒有完全把數據處理都統一到Ext.data.Store類中來，如Tree、Form組件就是采用其獨自的數據處理，但是還是通過一定的方式統一在Data接口。這樣，所有的數據請求都是通過Data來處理的，對測試、開發等方面都能提供更大的優勢。這一部分內容主要將在第6章進行分析。

1.4.1.3 元素擴展

Ext JS元素對DOM元素進行了功能擴展，它解決了DOM元素兼容、內存泄露等問題。它不僅對DOM元素進行了擴展、實現了CSS選擇器，也擴展了元素的動畫特效及拖曳方面的處理。

Ext JS元素對DOM元素的創建、插入、刪除、復制、查找和定位等方面都提供了更為強大方便的使用方法。Ext的動畫及拖曳功能很強大，通過簡單的一行或數行代碼就可以實現動畫或拖曳效果。更甚的是，它們已經集成在元素之中，只需通過簡單的參數配置就可以實現效果，這一部分內容將在第7章～第10章進行詳細的分析。

1.4.1.4 UI組件

Ext JS UI組件的實質是HTML標簽所表現的區域，它使靜態標簽變成動態的有著生命周期的組件。組件并不是分散的結構集，它在架構上采用了與繼承方式緊密關聯的倒樹結構，分層抽象出組件的共性。這樣每個組件都有著良好的擴展性和易用性。

Ext JS組件包括如下6個方面：Panel、Window、Form、Grid、Menu和Tree。其中，Panel主要用來布局，Window用來實現可拖曳的懸浮的窗體，Form用來進行表單交互的操作，Grid用來實現數據列表的操作，Menu用來實現菜單欄的功能，Tree則用來實現導航樹的功能。這些內容將在第11章～第17章進行詳細的介紹。

1.4.2 文件結構

在下載Ext JS之后，解壓其文件，我們可能會對著眾多的文件無從下手。這一節就對其目錄下所有的文件進行簡單的說明，這樣可以在使用過程中更好地了解Ext JS。表1.2中對Ext JS 3.0文件夾中的文件進行了說明。

表1.2對Ext JS壓縮包進行了簡介，讓讀者對Ext JS的文件結構有了一個大概的了解。本書主要是分析Ext JS如何實現，所以接下來在表1.3中將進一步介紹source文件夾中的文件。

表1.3中列出了Ext JS源碼文件夾中的相關文件并進行了說明。Ext JS最重要的組件部分在widgets子文件夾中，如表1.4所示。

通過表1.2～表1.4，我們列出了Ext JS的文件結構，該文件結構的內容對應著本書的所有內容。讀者先不需要完全理解，只要形成一個概要的了解即可。