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的文件结构，该文件结构的内容对应着本书的所有内容。读者先不需要完全理解，只要形成一个概要的了解即可。