ExtJS实用开发指南.docx

《ExtJS实用开发指南.docx》由会员分享，可在线阅读，更多相关《ExtJS实用开发指南.docx（118页珍藏版）》请在冰豆网上搜索。

ExtJS实用开发指南

ExtJS实用简明教程[收集整理:

龚辟愚、QQ群：

19274175]

-1-

序言

ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我

们的b/s应用更加具有活力及生命力。

ExtJS是一个用javascript编写，与后台技术无关的前

端ajax框架。

因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。

最近我们在几个应用都使用到了ExtJS，对公司以前开发的一个OA系统也正在使用ExtJS2.0

进行改造，使得整个系统在用户体验上有了非常大的变化。

本教程记录了前段时间本人学习

ExtJS的一些心得及小结，希望能帮助正在学习或准备学习ExtJS的朋友们快速走进ExtJS2.0

的精彩世界。

教程包括ExtJS的新手入门、组件体系结构及使用、ExtJS中各控件的使用方法及示例

应用等，是一个非常适合新手的ExtJS入门教程。

本教程主要是针对ExtJS2.0进行介绍，全

部代码、截图等都是基于ExtJS2.0。

在学习了本教程后，可以下载这个基于ExtJS2.0开发的单用户Blog系统

的源代码，这个系统是我们团队中的williamraym与大峡等人开发的一个演示系统，系统源

码整体质量比较高，通过学习这套源代码相邻一定能提高您ExtJS的综合水平。

本教程比较适合ExtJS的新手作为入门教程及手册使用，并在我的博客

我还编写了比本教程更为详细的《ExtJS实用开发指南》，包含详细的ExtJS框架使用方法、

各个控件详细配置参数、属性、方法及事件介绍，与服务器端集成及一个完整的示例应用系

统介绍等内容，适合想深入学习ExtJS或正在使用ExtJS进行开发朋友们使用。

该《指南》

当前在作为VIP文档发布，供该站的VIP用户阅读及下载。

凡是购买了《ExtJS

实用开发指南》文档的VIP用户，都可以在该指南印刷版出版后均会免费得到相应的印刷

版本。

最后，希望广大网友把阅读本教程中的发现的错误、不足及建议等反馈给我们，让我们

一起共同学习、共同进步，下面让我们一起进入精彩的ExtJS世界吧。

ExtJS实用简明教程[收集整理:

龚辟愚、QQ群：

19274175]

-2-

第一章、

ExtJSExtJSExtJS

ExtJS

简介

ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用

程序界面。

ExtJS可以用来开发RIA也即富客户端的AJAX应用，下面是一些使用ExtJS开发的

应用程序截图：

（wlr的blog应用）

ExtJS实用简明教程[收集整理:

龚辟愚、QQ群：

19274175]

-3-

（ExtJS的表格控件）

（不同主题的ExtJS弹出框效果）

ExtJS是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的

前端ajax框架。

因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。

ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing

等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，

都可算是一款不可多得的JavaScript客户端技术的精品。

ExtJS实用简明教程[收集整理:

龚辟愚、QQ群：

19274175]

-4-

第二章、开始

ExtJSExtJSExtJS

ExtJS

2.12.12.1

2.1

获得

ExtJSExtJSExtJS

ExtJS

要使用ExtJS，那么首先要得到ExtJS库文件，该框架是一个开源的，可以直接从官方

网站下载，网址

可以选择选择1.1或2.0版本，本教程使用的2.0版本。

图1-1ExtJs不同版本下载选择页面

单击上图中的【Downloadext-2.0.zip】超链接进行下载，把下载得到的ZIP压缩文件解

压缩到【D:

\ExtCode】目录下，可以得到如如图1-2所示的内容。

图1-2ExtJS发布包目录

adapter：

负责将里面提供第三方底层库（包括Ext自带的底层库）映射为Ext所支持

的底层库。

build：

压缩后的ext全部源码（里面分类存放）。

docs：

API帮助文档。

exmaples：

提供使用ExtJs技术做出的小实例。

resources：

ExtUI资源文件目录，如CSS、图片文件都存放在这里面。

source：

无压缩Ext全部的源码（里面分类存放）遵从LesserGNU（LGPL）开源的

协议。

ExtJS实用简明教程[收集整理:

龚辟愚、QQ群：

19274175]

-5-

Ext-all.js：

压缩后的Ext全部源码。

ext-all-debug.js：

无压缩的Ext全部的源码（用于调试）。

ext-core.js：

压缩后的Ext的核心组件，包括sources/core下的所有类。

ext-core-debug.js：

无压缩Ext的核心组件，包括sources/core下的所有类。

2.22.22.2

2.2

、应用

ExtJSExtJSExtJS

ExtJS

应用extjs需要在页面中引入extjs的样式及extjs库文件，样式文件为resources/css/ext-

all.css，extjs的js库文件主要包含两个，adapter/ext/ext-base.js及ext-all.js，其中ext-base.js

表示框架基础库，ext-all.js是extjs的核心库。

adapter表示适配器，也就是说可以有多种适

配器，因此，可以把adapter/ext/ext-base.js换成adapter/jquery/ext-jquery-adapter.js，或

adapter/prototype/ext-prototype-adapter.js等。

因此，要使用ExtJS框架的页面中一般包括下面

几句：

在ExtJS库文件及页面内容加载完后，ExtJS会执行Ext.onReady中指定的函数，因此

可以用，一般情况下每一个用户的ExtJS应用都是从Ext.onReady开始的，使用ExtJS应用

程序的代码大致如下：

fn也可以写成一个匿名函数的形式，因此上面的代码可以改成下面的形式：

ExtJS实用简明教程[收集整理:

龚辟愚、QQ群：

19274175]

-7-

在浏览hello.html，即可得在屏幕上显示一个窗口，如图xxx所示。

第三章

ExtExtExt

Ext

框架基础及核心简介

3.13.13.1

3.1

、

ExtExtExt

Ext

类库简介

ExtJS由一系列的类库组成，一旦页面成功加载了ExtJS库后，我们就可以在页面中通

过javascript调用ExtJS的类及控件来实现需要的功能。

ExtJS的类库由以下几部分组成：

ExtJS实用简明教程[收集整理:

龚辟愚、QQ群：

19274175]

-8-

底层API（core）：

底层API中提供了对DOM操作、查询的封装、事件处理、DOM查询

器等基础的功能。

其它控件都是建立在这些底层api的基础上，底层api位于源代码目录的

core子目录中，包括DomHelper.js、Element.js等文件，如图xx所示。

控件（widgets）：

控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、

表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控

件来实现友好、交互性强的应用程序的UI。

控件位于源代码目录的widgets子目录中，包含

如图xx所示。

ExtJS实用简明教程[收集整理:

龚辟愚、QQ群：

19274175]

-9-

实用工具Utils：

Ext提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON

数据解码或反解码、对Date、Array、发送Ajax请求、Cookie管理、CSS管理等扩展等功

能，如图所示：

3.23.23.2

3.2

、

ExtExtExt

Ext

的组件

Ext2.0对框架进行了非常大的重构，其中最重要的就是形成了一个结构及层次分明的组

件体系，由这些组件形成了Ext的控件，Ext组件是由Component类定义，每一种组件都有

一个指定的xtype属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组

件。

ExtJS中的组件体系由下图所示：

ExtJS实用简明教程[收集整理:

龚辟愚、QQ群：

19274175]

-10-

组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。

基本组件有：

xtypeClass

boxExt.BoxComponent具有边框属性的组件

ButtonExt.Button按钮

colorpaletteExt.ColorPalette调色板

componentExt.Component组件

containerExt.Container容器

cycleExt.CycleButton

dataviewExt.DataView数据显示视图

datepickerExt.DatePicker日期选择面板

editorExt.Editor编辑器

editorgridExt.grid.EditorGridPanel可编辑的表格

ExtJS实用简明教程[收集整理:

龚辟愚、QQ群：

19274175]

-11-

3.33.33.3

3.3

、组件的使用

组件可以直接通过new关键子来创建，比如控件一个窗口，使用newExt.Window（），

创建一个表格则使用newExt.GridPanel（）。

当然，除了一些普通的组件以外，一般都会在构

造函数中通过传递构造参数来创建组件。

组件的构造函数中一般都可以包含一个对象，这个对象包含创建组件所需要的配置属性

及值，组件根据构造函数中的参数属性值来初始化组件。

比如下面的例子：

gridExt.grid.GridPanel表格

pagingExt.PagingToolbar工具栏中的间隔

panelExt.Panel面板

progressExt.ProgressBar进度条

splitbuttonExt.SplitButton可分裂的按钮

tabpanelExt.TabPanel选项面板

treepanelExt.tree.TreePanel树

viewportExt.ViewPort视图

windowExt.Window窗口

工具栏组件有

toolbarExt.Toolbar工具栏

tbbuttonExt.Toolbar.Button按钮

tbfillExt.Toolbar.Fill文件

tbitemExt.Toolbar.Item工具条项目

tbseparatorExt.Toolbar.Separator工具栏分隔符

tbspacerExt.Toolbar.Spacer工具栏空白

tbsplitExt.Toolbar.SplitButton工具栏分隔按钮

tbtextExt.Toolbar.TextItem工具栏文本项

表单及字段组件包含

formExt.FormPanelForm面板

checkboxExt.form.Checkboxcheckbox录入框

comboExt.form.ComboBoxcombo选择项

datefieldExt.form.DateField日期选择项

fieldExt.form.Field表单字段

fieldsetExt.form.FieldSet表单字段组

hiddenExt.form.Hidden表单隐藏域

htmleditorExt.form.HtmlEditorhtml编辑器

numberfieldExt.form.NumberField数字编辑器

radioExt.form.Radio单选按钮

textareaExt.form.TextArea区域文本框

textfieldExt.form.TextField表单文本框

timefieldExt.form.TimeField时间录入项

triggerExt.form.TriggerField触发录入项

ExtJS实用简明教程[收集整理:

龚辟愚、QQ群：

19274175]

-12-

运行上面的代码可以实现如下图所示的结果：

可以省掉变量obj，直接写成如下的形式：

render方法后面的参数表示页面上的div元素id，也可以直接在参数中通过renderTo参

数来省略手动谳用render方法，只需要在构造函数的参数中添加一个renderTo属性即可，

如下：

对于容器中的子元素组件，都支持延迟加载的方式创建控件，此时可以直接通过在需要

父组件的构造函数中，通过给属性items传递数组方式实现构造。

如下面的代码：

注意中括号中加粗部份的代码，这些代码定义了TabPanel这个容器控件中的子元素，

varobj={title:

"hello",width:

300,height:

200,html:

'Hello,easyjfopensource'};

varpanel=newExt.Panel（obj）;panel.render（"hello"）;