《extjs实用开发指南》由会员分享，可在线阅读，更多相关《extjs实用开发指南（69页珍藏版）》请在金锄头文库上搜索。
1、ExtJS 实用简明教程收集整理:龚辟愚、QQ 群：19274175- 1 -序言ExtJS 是一个很不错的 Ajax 框架， 可以用来开发带有华丽外观的富客户端应用， 使得我 们的 b/s 应用更加具有活力及生命力。ExtJS 是一个用 javascript 编写，与后台技术无关的前 端 ajax 框架。因此，可以把 ExtJS 用在.Net、Java、Php 等各种开发语言开发的应用中。 最 近我们在几个应用都使用到了 ExtJS， 对公司以前开发的一个 OA 系统也正在使用 ExtJS2.0 进 行改造， 使得整个系统在用户体验上有了非常大的变化。 本教程记录了前段时间本人学习 ExtJ
2、S 的一些心得及小结， 希望能帮助正在学习或准备学习 ExtJS 的朋友们快速走进 ExtJS2.0 的精彩世界。教程包括 ExtJS 的新手入门、组件体系结构及使用、ExtJS 中各控件的使用方法及示例 应用等，是一个非常适合新手的 ExtJS 入门教程。本教程主要是针对 ExtJS2.0 进行介绍，全 部代码、截图等都是基于 ExtJS2.0。在学习了本教程后， 可以下载 这个基于 ExtJS2.0 开发的单用户 Blog 系统 的源代码，这个系统是我们团队中的 williamraym 与大峡等人开发的一个演示系统，系统源 码整体质量比较高，通过学习这套源代码相邻一定能提高您 ExtJS
3、 的综合水平。本 教 程 比 较 适 合 ExtJS 的 新 手 作 为 入 门 教 程 及 手 册 使 用 ， 并 在 我 的 博 客 http:/ 我还编写了比本教程更为详细的ExtJS 实用开发指南 ，包含详细的 ExtJS 框架使用方法、 各个控件详细配置参数、属性、方法及事件介绍，与服务器端集成及一个完整的示例应用系 统介绍等内容，适合想深入学习 ExtJS 或正在使用 ExtJS 进行开发朋友们使用。该指南 当前在 作为 VIP 文档发布， 供该站的 VIP 用户阅读及下载。 凡是购买了 ExtJS 实用开发指南文档的 VIP 用户，都可以在该指南印刷版出版后均会免费得到相应 的
4、印刷 版本。最后，希望广大网友把阅读本教程中的发现的错误、不足及建议等反馈给我们，让我们 一起共同学习、共同进步，下面让我们一起进入精彩的 ExtJS 世界吧。ExtJS 实用简明教程收集整理:龚辟愚、QQ 群：19274175- 2 -第一章、ExtJS简介ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用 程序界面。 ExtJS可以用来开发RIA也即富客户端的AJAX应用，下面是一些使用ExtJS开发的 应用程序截图：(wlr的blog应用)ExtJS 实用简明教程收集整理:龚辟愚、QQ 群：19274175- 3 -(ExtJS的表格控件
5、)(不同主题的ExtJS弹出框效果) ExtJS是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs 最开始基于 YUI 技术，由开发人员 Jack Slocum 开发，通过参考 Java Swing 等机制来组织可视化组件，无论从 UI 界面上 CSS 样式的应用，到数据解析上的异常处理， 都可算是一款不可多得的 JavaScript 客户端技术的精品。ExtJS 实用简明教程收集整理:龚辟愚、QQ 群：19274175- 4 -第二章、开始 ExtJS2
6、.1 获得 ExtJS要使用 ExtJS，那么首先要得到 ExtJS 库文件，该框架是一个开源的，可以直接从官方 网站下载， 网址 http:/ 进入下载页面可以看到大致如图 xxx 所示的内容 ， 可以选择选择 1.1 或 2.0 版本，本教程使用的 2.0 版本。图 1-1 ExtJs 不同版本下载选择页面单击上图中的【Download ext-2.0.zip】超链接进行下载，把下载得到的 ZIP 压缩文件解 压缩到【D:ExtCode】目录下，可以得到如如图 1-2 所示的内容。图 1-2 ExtJS 发布包目录adapter：负责将里面提供第三方底层库（包括 Ext 自带的底层库）映射
7、为 Ext 所支持 的底层库。 build： 压缩后的 ext 全部源码(里面分类存放)。docs： API 帮助文档。 exmaples：提供使用 ExtJs 技术做出的小实例。 resources：Ext UI 资源文件目录，如 CSS、图片文件都存放在这里面。 source： 无压缩 Ext 全部的源码(里面分类存放) 遵从 Lesser GNU （LGPL） 开源的 协议。ExtJS 实用简明教程收集整理:龚辟愚、QQ 群：19274175- 5 -Ext-all.js：压缩后的 Ext 全部源码。ext-all-debug.js：无压缩的 Ext 全部的源码(用于调试)。 ext-c
8、ore.js：压缩后的 Ext 的核心组件，包括 sources/core 下的所有类。 ext-core-debug.js：无压缩 Ext 的核心组件，包括 sources/core 下的所有类。2.2、应用 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 表示适配
9、器，也就是说可以有多种适 配 器 ， 因 此 ， 可 以 把 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 应用 程序的代码大致如下：functio
10、n fn() alert(ExtJS库已加);Ext.onReady(fn);fn 也可以写成一个匿名函数的形式，因此上面的代码可以改成下面的形式：function fn() alert(ExtJS库已加载!);Ext.onReady(function () alert(ExtJS库已加载!););ExtJS 实用简明教程收集整理:龚辟愚、QQ 群：19274175- 6 -2.3、ExtJS 版的 HelloWorld下面我们写一个最简单的 ExtJS 应用，在 hello.html 文件中输入下面的代码：ExtJSExt.onReady(function();Ext.MessageBox.
11、alert(“hello“,“Hello,easyjf open source“);图1-11 hello.html页面效果进一步，我们可以在页面上显示一个窗口，代码如下：ExtJS 实用简明教程收集整理:龚辟愚、QQ 群：19274175- 7 -Ext.onReady(function()var win=new Ext.Window(title:“hello“,width:300,height:200,html:Hello,easyjf open source);win.show(););在浏览 hello.html，即可得在屏幕上显示一个窗口，如图 xxx 所示。第三章 Ext 框架基础
12、及核心简介3.1、Ext 类库简介ExtJS 由一系列的类库组成，一旦页面成功加载了 ExtJS 库后，我们就可以在页面中通 过 javascript 调用 ExtJS 的类及控件来实现需要的功能。ExtJS 的类库由以下几部分组成：ExtJS 实用简明教程收集整理:龚辟愚、QQ 群：19274175- 8 -底层 API(core)：底层 API 中提供了对 DOM 操作、查询的封装、事件处理、DOM 查询器等基础的功能。其它控件都是建立在这些底层 api 的基础上，底层 api 位于源代码目录的 core 子目录中，包括 DomHelper.js、Element.js 等文件，如图 xx
13、所示。控件(widgets)：控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、 表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控 件来实现友好、交互性强的应用程序的 UI。控件位于源代码目录的 widgets 子目录中，包含 如图 xx 所示。ExtJS 实用简明教程收集整理:龚辟愚、QQ 群：19274175- 9 -实用工具 Utils：Ext 提供了很多的实用工具， 可以方便我们实现如数据内容格式化、 JSON 数据解码或反解码、对 Date、Array、发送 Ajax 请求、Cookie 管理、CSS 管理等扩展等功 能，如图所示：3.2、E
14、xt 的组件Ext2.0 对框架进行了非常大的重构， 其中最重要的就是形成了一个结构及层次分明的组 件体系，由这些组件形成了 Ext 的控件，Ext 组件是由 Component 类定义，每一种组件都有 一个指定的 xtype 属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组 件。 ExtJS 中的组件体系由下图所示：ExtJS 实用简明教程收集整理:龚辟愚、QQ 群：19274175- 10 -组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。 基本组件有：xtypeClassboxExt.BoxComponent 具有边框属性的组件ButtonExt.Butt
15、on按钮colorpaletteExt.ColorPalette 调色板componentExt.Component组件containerExt.Container容器cycleExt.CycleButtondataviewExt.DataView 数据显示视图datepickerExt.DatePicker 日期选择面板editorExt.Editor编辑器editorgridExt.grid.EditorGridPanel 可编辑的表格ExtJS 实用简明教程收集整理:龚辟愚、QQ 群：19274175- 11 -gridExt.grid.GridPanel 表格pagingExt.Pag
16、ingToolbar 工具栏中的间隔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.T
