本节书摘来自异步社区《Ext JS实战》一书中的第1章，第1.3节，作者：【美】Jesus Garcia著，更多章节内容可以访问云栖社区“异步社区”公众号查看
1.3 框架概览
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中有哪些新东西。
