ExtJS源码分析与实例宝典


第 1 章 WEB 如此美丽,初探 Ext JS ExtJS 以其绚丽的样式吸引了前端开发者的眼球,以其丰富的文档实例诱使 web 开发 者投身其中。从 YUI-Ext 到 Ext JS 3.0 期间吸引了无数前端开发者,形成了庞大的用户群 和丰富的文档资料,同进也奠定了 Ext JS 的成功。本章将对 Ext JS 进行宏观性的概述,使 读者有个整体上的认识。 1.1 ExtJS 是什么 Web2.0 风靡时,JS 类库雨后春笋般涌出,这些框架可以分成两类:Web 前端开发辅 助类库和 Web 富客户端开发类库。前端开发辅助类库主要为了在传统的 Web 开发方式下 提供更方便快捷的 JS 开发功能,而富客户端开发类库则是完全采用 JS 来构建客户端,它 采用了 Ajax 开发模式来进行的前端页面的设计。 Ajax 是 DOM、CSS、JavaScript/XML 等成熟技术的集合,其本身不是新技术,但其 名词的出现,却引起众多程序开发者的关注且在业界掀起重重波澜。Ajax 在 Web 开发中 扮演了全新角色,改变了 Web 应用的开发模式。 在传统的 Web 开发模式下,浏览器客户端是无状态的,反复进行请求--刷新--响应的 过程。每当用户通过单击按钮或链接时,浏览器就向服务器发送请求,服务器接收到该请 求并进行处理,然后将处理完毕信息发送至浏览器展示。在该段响应处理时间中,浏览器 显示空白且处在无响应状态,用户唯一能做的就是等待。传统的 Web 开发中,用户的每次 请求都会返回完整的显示页面,浏览器充当接收和显示的工具,它不能决定用户需要什么, 应该请求什么内容。 而 Ajax 开发模式则相反,它给予了浏览器主动权,浏览器可以有选择地向服务器请 求其所需的数据,然后根据响应的数据动态修改页面局部并显示,减少了网络传输的数据 量,加快了浏览速度,提升了用户体验。 按理说 Ajax 模式是先进的开发方式,但在现实的用中却存在种种问题,如不利于搜 索引擎的搜索。于是在应用中出现了两种形式:一种是传统 Web 开发和 AJAX 方式相结合, 另外一种是富客户端表现。 目前大多数网络都采用传统 Web 开发为主,AJAX 开发为辅相给合的开发模式。AJAX 开发主要应用于如下几种情况:输入前提示、关联下拉选择及图片显示的 lightBox 效果等。 这样没有改变用户长期以来形成的习惯,同时也提供了较好的用户体验。一般来讲,该开 发模式适用于网站开发,因为它主要是向用户提供浏览信息,且交互不多。 但是富客户端应用却需要给用户提供强大的交互功能,应用最典型的就是网络办公系 统。它们以前都是桌面应用软件,从基于客户端的软件迁移到基于浏览器的应用。该类应 用要求如桌面应用软件一样,操作方便且用户界面(UI)富有表现力。在 Ajax 尚未出现 前,程序员可以通过 Flash 等胖客户端来完成,之所以称为胖客户端,那是因为它们需要 浏览器安装相应的插件。而现在采用 Ajax 来表现富客户端,只需要浏览器即可。 联系:sharepub@126.com ExtJS 源码分析与实例宝典 为了能方便快速地开发桌面式的 Web 富客户端,于是出现大量的 Web UI 类库,其中 最有名是 DOJO、YUI。DOJO 看是一个很有前途的框架,背后有大公司支持,但是其效 率等各方面不敢让人恭维。而 YUI 成为 Web UI 中的主力,但其设计的主要目的是形成分 散的 UI 组件供前端开发者使用,要把这些组件组装成风格统一的类桌面软件相当困难。 Ext JS 缔造者 Jack Slocum 在使用 YUI 进行开发时,看到这个巨大市场,在 YUI 基础 上进一步进行扩展,提供了统一主题,形成绚丽 YUI-Ext 类库,吸引无数 Web 开发者眼球。 YUI-Ext 打着开源免费的旗号,无数的前端开发者涌入其社区进行扩展和丰富,形成 丰富的多国语言文档和使用实例,渐渐得到广大开发者的认可。从 YUI-Ext 到 Ext 1.1 版 本,它经历了一段与 YUI 的脱离过程,ExtJS 不再建立在 YUI 基础之上,它提供了自己的 基础库,名字也进行了变化。 然后 Ext 1.1 版本在布局和组件的架构上存在巨大缺陷,Ext 2.0 进行脱胎换骨般的重 构。在之后的 2.0.2 版本中,其开源 GPL licence 也改成 LGPL licence,尽管招来开源社区 的猛烈攻击,但是其用户群反而越来越大。Ext 3.0 版本对 2.0 版本进行了改进,增加了图 表、Comet、RPC 等功能,另外的改进主要体现在内存及性能上。 1.2 为什么选择 ExtJS 在 Java 开发中,选择适合项目的框架是件为难的事情,它需要从团队开发成员的技术 力量和项目需求等各方面来考量。富客户端的页面开发也面临同样情形。表 1-1 先列出目 前经常使用的技术。 前端开发技术 说明 Prototype Prototype 是一个易于使用、面向对象的 JavaScript 框架。它封装、简化并扩展一些在 Web 开 发过程中常用到 JavaScript 方法与 Ajax 交互处理过程。script.aculo.us 增强 Prototype 功能,它提 供了动画、拖曳、DOM 工具及单元测试等。其网址:http://www.prototypejs.org/。 JQuery JQuery 是一个快速、简洁的 JavaScript 框架,简化查询 DOM 对象、处理事件、制作动画和处 理 Ajax 交互过程。利用 JQuery 将改变编写 JavaScript 代码的方式及风格。原先需要 20 行代码 完成的功能,现在只需要 10 行即可轻松搞定。其网址,:http://www.jquery.com/。 MooTools MooTools 是一个简洁、模块化、面向对象的 JavaScript 框架。它能够帮助你更快速而简单地 编写可扩展和兼容性强的 JavaScript 代码。 它与 protope 相似,但其整体设计比 Prototype 相对 完善,功能更强大,比如增加动画特效、拖放操作等。其网址:http://mootools.net/。 YUI YUI 是一组采用 DOM scripting、DHTML 和 Ajax 等技术开发的 Web UI 控件和工具。其提供 众多组件,如 Container、Menu、TreeView、DataTable、Button 等,而且文档十分丰富。如果需 要单独采用某些组件,使用 YUI 是一个不错的选择。其网址:http://developer.yahoo.com/yui/。 Dojo Dojo 是一个强大的面向对象 JavaScript 框架。主要由三大模块组成: z Core:提供 Ajax、事件、包、CSS 查询、动画等相关操作。 z Dijit:可更换皮肤,基于模板的 WEB UI 组件库。 z DojoX:新颖的组件库,如图表、离线应用、跨浏览器矢量绘图等。 其网址:http://dojotoolkit.org/。 Qooxdoo Qooxdoo 是用于开发 Ajax 应用程序的 GUI 框架,不需要 HTML、CSS、DOM 等知识,采用面 向对象的 JavaScript API 就能够开发出类似于 Window 桌面风格的 Web 应用程序。与 ExtJS 相比, 它更多地是采用 OOP 来架构和重现 JavaScript 语言。其网址:http://qooxdoo.org/。 Flex Flex 是用来编写 web 应用程序的开发工具,如 vs2005。Flex 编译后文件是 Flash 的 SWF 格式, 所以其能跨平台跨浏览器、支持流媒体、支持底层操作(如调用摄像头实现视频)等。 但是 Flex 是新技术,尚无成功的大型应用,但是已经吸引了大量开发者投入其中。 SilverLight SilverLight 是微软公司开发出来抗衡 Flex 的工具,有着 Flex 的优点。其和 Flex 一样,需要安 联系:sharepub@126.com 第 1 章 WEB如此美丽,初探 Ext JS 装浏览器插件,但 Flash Player 插件已经深入人心。SilverLight 之后的发展前景并不是明朗。 表 1-1 前端开发技术的选择 上表中列出可供选择的前端开发技术。其中Flex和SilverLight都需要浏览器插件支持, 它们使用简单方便,开发出的效果绚丽多彩。但是目前在开发中不推荐使用它们, SilverLight 的发展和插件都不是很成熟, Flex 目常尚无成功案例。 如果采用 JS 进行网站的辅助开发,那毫无疑问是选择 JQuery、mootools 之类的类库。 如果采用 JS 实现富客户端应用,那么就得仔细考虑一下,因为统一页面样式及风格十分 困难,所以我们不应该去考虑 JQuery 或者 YUI 等类库。 比较 Qooxdoo 和 ExtJS,开发者会很自然使用 ExtJS,它文档实例丰富,其性能高于 Qooxdoo,使用人群众多。 初学者也经常会面临着该种选择,选择学习哪一种类库。学会流行并且应用前景好的 框架能让读者找到更好的工作,或在技术方面更进一步。Ext JS 值不值得学习呢?值不值 得在项目中选用呢?学习它要花多大的成本呢?下面我们就 Ext JS 优点作简单说明: ¾ 统一主题(theme) 通过主题,样式能从 UI 组件中解耦分离出来。对于应用而言,可以根据不同的主题 来统一改变风格。解耦的优点就是组件和主题能各自单独开发。使用 UI 组件时,可以不 必关心主题。完成之后根据需求或喜好选择套用主题。Ext JS 提供几套主题模板,一般情 况下,开发者不太需要 CSS、PhotoShop 等美工方面的知识就可以开发出绚丽的应用系统。 ¾ UI 与数据解耦 众多 Java 框架都采用 MVC 模式作为其架构模式。Ext JS 在架构时也借鉴了 MVC 思 想,它把主题与 UI 组件解耦、UI 组件与数据解耦。设计 UI 时,不必考虑各种各样的数 据形式,可以通过统一的数据接口来操作数据。 ¾ 丰富的 UI 组件 Ext JS 的主要目的是构建 UI 组件,并提供给开发者使用。它提供众多功能强大、使 用简单方便的 UI 组件。在其官方论坛和文档例子中都提供众多的扩展组件。开发者不但 能方便利用这些组件进行开发,还可以对这些 UI 组件进行扩展,形成自己的 UI 组件库。 ¾ 方便测试与调试 JS 调试困扰开发的大问题,尽管一些浏览器也提供了插件(如 FF 的 FireBug)来完成 调试工作,但它们在准确度及精度上都不能令人满意。Ext JS 通过 Log 的形式来提供调试 功能,让 ExtJS 代码调试可以跟踪进入 Ext JS 源码内部。,分析其运行状态以及出错原因。 ¾ 优秀的源码 Ext JS 源码设计精妙、结构清晰、匠心独用。其源码的文档丰富,是学习 JavaScript 的最好的教科书。其代码中的拦截思想和编译的实现,可以看作是天才之作。如能分析其 源码,对于在 JavaScript 的领域中水平能迅速提高。 如果仅仅是功能的优秀还是不够的,很多优秀的框架并没有什么人气,那么 Ext JS呢? 在选择类库时,还得考虑人气。人气高了公司招这方面技术人员容易而且成本低。此外, 人气高了开发过程中遇到问题,可以通过论坛或者朋友轻松地解决,提高学习效率。 在 Extjs 的官方网站就列出差不多 100 家的大公司在使用的 Ext JS。其中著名的公司 有:Adobe、AIG、Microsoft、Borland、CNN、SAP、Sun、Sony、HP、IBM 等。国内也 联系:sharepub@126.com ExtJS 源码分析与实例宝典 有大量的公司使用 Ext JS,因为其一般都在内网中使用,不便于统计。但我们只要进入 JS 论坛,就可以了解 Ext JS 的使用情况。很多论坛中,讨论 Ext JS 的贴子占绝大多数。 如果功能或人气还不够的话,那么丰富的文档绝对是可以打动人的。我们下载的 Ext JS 源码包中,不但包括 Ext JS 的使用文档,还包括开发中经常使用的实例。使用文档对 Ext JS 组件的功能、配置项、属性,事件都一清二楚地列出并进行说明。在开发过程,开发者经 常做的事情就是针对文档实例中的例子稍加修改,之后应用到系统中去。 1.3 如何学习 ExtJS 如何学习 Ext JS 呢?所有刚接触 Ext JS 的读者都会询问该问题。学习 Ext JS 的最好办 法就是独立去实现一个应用系统,该系统的相关功能可以对着 Ext JS 包中自带实例进行修 改。在实现的过程肯定会碰到这样那样的问题,可以通过论坛或其它方式来解析。 在学习或开发之前,我们得先知道哪里下载 Ext JS、如何搭建开发环境及相关的论坛。 1.3.1 获取源码并部署 我们可以从 Ext JS 官方网站下载最新的版本,目前版本号是 ExtJS 3.0,其网址为: http://www.extjs.com/products/extjs/download.php。下载的压缩包中包括源码、实例和文档 等。为了能运行其文档或实例,我们要把其解压部署在如 IIS、Tomcat 容器中。 只要把其下载的 ExtJS 3.0 解压之后的根目录文件夹直接拷到对应容器中,重启该容 器,接下就可以通过 http://localhost:8080/ext-3.0/docs/index.html 访问到其文档,或通过 http://localhost:8080/ext-3.0/examples/samples.html 访问其实例,如图 1-1 所示: 图 1-1 ExtJS 自带实例演示 1.3.2 开发工具的智能提示 欲善其事先利其器,在使用和开发 Ext JS 之前,我们也要找到一个好的开发工具。Ext JS 有众多的类和函数,有时很难记住每个类或函数的拼写,如果开发工具通过提供智能提 联系:sharepub@126.com 第 1 章 WEB如此美丽,初探 Ext JS 示,让给开发者提供巨大方便。 Spket 是开发 ExtJS 的利器,它支持 ExtJS 的智能提示。它分别为 Eclipse3.2、 VisualStudio2008、DreamweaverCS3 等开发工具中提供相对应的 ExtJS 智能提示的插件。 在 Eclipse 中还支持链接跳转方式的代码查看,这对于学习和分析 ExtJS 源码有着极大的帮 助。 VisualStudio 2008 本身就支持 JS 的智能提示,只要在需要提示的 JS 文件引入依赖的 类库就可以,如/// 。但是直接引用 ExtJS 中的文件有时 候会出现一些的问题,于是 Spekt 专门提供 vswd-ext_2.2.js(目前尚未提供 vswd-ext_3.0.js, 该文件可以用来智能提示 ext_3.0)来代替 ExtJS 源码进行智能提示,该文件可以从 http://www.spket.com/ext-intellisense-visual-studio.html 下载。如图 1-2 所示: 图 1-2 VisualStudio 2008 智能提示 Dreamweaver 开发工具的用户可以使用 SpketDW (Dreamweaver 2004)和 SpketDWCS (Dreamweaver CS3)插件来进行智能提示。两者都是 Spket 团队开发,因此同样精确和出色, 另外 Dreamweaver 插件的一大特点是很好地支持配置项的代码提示。 我们可以到 http://www.spket.com/dreamweaver-extension.html 下载相对应的插件。对于 Dreamweaver CS3,在 安 装 SpketDWCS 插件之前,还需要先安装 Adobe Extension Manager CS3 1.8 的插件。其提示如图 1-3 所示: 图 1-3 Dreamweaver 智能提示 Spket IDE 是目前支持 Ext JS 最为出色的 IDE。它采用.jsb 项目文件并将继承于基类 联系:sharepub@126.com ExtJS 源码分析与实例宝典 和所有文档的内容嵌入到生成代码提示的 Script 文档中。下面是安装它的步骤: Step1 在 Eclipse 菜单中选择 Help -> Software Updates -> Find and Install...-> Search for new features to install ->New remote site...。这时会弹出窗口,在该容器的 Name 文本 框中输入 "Spket", 在 Url 文本框中输入 http://www.spket.com/update/。点击 OK 按钮, 接下来按提示操作就可以完成,最后重启 Eclipse。 Step2 在 eclipse 菜单中选择 WindowÆPreferences ÆSpketÆJavaScript ProfilesÆNew;弹出 窗口,输入名字:“ExtJS”点击 OK 按钮。这时 ExtJS 会出现在主窗口中,选择“ExtJS” 并 点击“Add Library”按钮,弹出一个小窗口,在该小窗口中下拉条中选取“ExtJS”,为 ExtJS 指明其属于那一种类型。接下来在主窗口中选择 “ExtJS”并点击“Add File”,然后 在./ext-3.0/source 目录中选取“ext.jsb” 文件; Step 3 设置新的 ExtJS Profile,选中并点击“JavaScript Profiles” 对话框右边的“Defalut” 按钮。 Step 4 JS 打开方式为 WindowÆPreferencesÆGeneralÆ EditorsÆ File...选择 JS 为 Spket JavaScript Editor(default)。现在就可以看到其智能提示的效果,如图 1-4 所示: 图 1-4 Eclipse 智能提示 1.3.3 文档和实例的学习 学习和使用 ExtJS,有两样东西是必不可少的:一是其文档,二是其自带实例。读者如 何想要实现什么功能,可以先把到实例中去查看一下,一般都会有着自己要实现的效果。 对于实例源码需要做一些修改,之后应用到应用系统中去。在分析实例源码时,我们就要 用到其文档。 ExtJS 文档把所有公开类的使用方法、属性、事件等都进行详细说明,唯一困难的地方 就是它是英文文档。ExtJS 文档网页分成两部分,如图 1-5 所示: 联系:sharepub@126.com 第 1 章 WEB如此美丽,初探 Ext JS 图 1-5 ExtJS 文档说明 其中左边是所有类导航,可以进行筛选过滤查询。只要点击左边导航树上的节点,右 边就会出现相对应的类说明。如图 1-5 所示的 Ext.Panel 类。右边说明包括 5 个部分:第一 部分是对该类进行概述性说明。 接下的四部分是对 ExtJS 类的 4 大功能一一进行说明。在使用某类时,我们一般都要通 过 new 来构建该类,其中传入的参数是配置对象,配置对象中包括众多配置项,这些都一 一列出并进行说明。如图 1-6 所示。 图 1-6 配置项 配置项可以继承父类,如 Ext.Panel 类的 activeItem 配置项就是继承于 Ext.Container 类。 同时对每个配置项还指定了类型。其使用方法如下: mypanel=new Ext.Panel({activeItme:1,allowDomMOve:true });。 接下来文档对类的属性和方法进行说明,在使用时可以根据需求调用相关的方法,该 部分没有什么好讲的,最后一部分是事件进行说明,如图 1-7 所示。 图 1-7 事件的说明 当类运行到某一个时刻需要自定义扩展处理时,就要使用事件来定制回调函数。对于 初学者,文档中的事件是有点难于理解。我们通过一个袜例子来说明,图 1-7 中有一个事 件叫“add”。当我们需要在向 Panel 增加组件之后,弹出通知信息,可以如下实现: mypanel.on("add",function(t,c,i){alert("add panel");}); 联系:sharepub@126.com ExtJS 源码分析与实例宝典 当 mypanel 实例运行到“add“时刻,就会调用自定义的回调函数。回调函数的参数是 系统自动传入。不同的事件都会有着不同参数,该参数在文档中进行了说明。 1.3.4 学习的论坛 在学习和使用 ExtJS 过程中,碰到各种各样的问题。有的时候,这些问题不能自行解决, 就得求助于他人。ExtJS 的广泛的应用,在网络上有很多相关技术讨论的论坛。 Ext JS 官方论坛可以说是最权威的 ExtJS 技术论坛,它是 Ext JS 和用户交流的窗口。不 但提供众多的 ExtJS 的扩展组件。还提供了 ExtJS 新的功能需求,求助等众多版块。问题 基本能从这边得到解决。其网址:http://www.extjs.com/forum/。 国内也一些论坛有大量的开发者用来讨论 ExtJS,如一起 Ext 等网站。 1.4 ExtJS 体系结构 在决定使用或学习 Ext JS 之后,我们得了解一下 Ext JS 的整个体系结构。它有一百多 个类,几十个组件和众多的方法,为客户端开发提供了所有必要的功能。 1.4.1 体系结构 从整体上来讲,Ext JS 可以分成 4 大模块,每个模块又可以分成各个小模块。它采用 了分层架构方式。从图 1-8 中可以看出,Ext JS 的整体架构分成了 4 个部分:核心、元素、 数据、组件。这四大部分采用分层梯形结构。核心功能是为元素扩展、数据处理、UI 组件 而服务的,它是 ExtJS 最基础的实现。元素扩展则是对 JavaScript 中 DOM 元素进行扩展, 使其使用起来更为方便。数据处理是 Ext JS 和服务器进行数据传递交互的功能。开发者只 要使用 UI 组件及数据处理的功能就可以完成应用系统的绝大多数任务。下面就简要分析 其各个模块。 图 1-8 Ext JS 的体系结构 1.4.1.1 核心功能 Ext JS 最底层架构的核心功能包含事件处理、模板功能、继承特性、原生对象扩展等。 它们使得 Ext JS 组件有着良好的扩展性、易用性及代码重用等。 联系:sharepub@126.com 第 1 章 WEB如此美丽,初探 Ext JS Ext 即是命名空间,又是静态类,提供统一的入口。该入口实现了继承、浏览器兼容 等常用功能。 事件机制模板机制是 ExtJS 组件架构中两大重要机制: ¾ 通过事件的方法去扩展定制组件; ¾ 是通过模块化内容来实现组件的重用。 ExtJS 核心功能还对如 Function、Date、String、Array 及定时任务等原生对象或原生方 法进行扩展,提供了强大的开发功能。其内容将在 3、4、7 章进行详细地讲解。 1.4.1.2 数据处理 数据处理是客户端的数据统一操作的接口。不管是数据来自何方,都可以通过该接口 进行统一操作。其操作的数据是解析器解析代理请求的原始数据之后的二维表数据。通过 代理--解析--储存—回写四步,呈现给开发者的数据如数据库的二维表数据,可以对该二维 表数据进行排序,统计、查询,更新等操作,最后能方便地通过回写保存到服务器中。 在目常的 ExtJS 实现中,它并没有完全把数据处理都统一到 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 组件 ExtJS UI 组件的实质是 HTML 标签所表现的区域,然而它使静态标签变成动态的有着 生命周期的组件。组件并不是分散的结构集,架构上采用了继承方式紧密关联的倒树结构, 分层抽象出组件的共性。这样每个组件都有着良好的扩展性和易用性。 ExtJS 组件有着如下 6 个方面:Panel、Window、Form、Grid、Menu、Tree。其 中 Panel 主要用来布局用;Window 是用来实现可拖曳的悬浮的窗体;Form 是用来进行表单交互的 操作;Grid 是用来实现数据列表的操作;Menu 是用来实现菜单栏的功能;Tree 则是实现 导航树的功能。这些将在第 11~17 章进行详细地介绍。 1.4.2 文件结构 在下载 ExtJS 之后,解压了其文件,我们可能会对着众多的文件无从下手。这一节就 对其目录下所有的文件进行简单地说明。这样可以在使用过程更好地了解 ExtJS。下面就 ExtJS 3.0 的文件夹中的文件进行说明: 联系:sharepub@126.com ExtJS 源码分析与实例宝典 文件或子文件夹 说明 adapter adapter 文件夹为 Ext JS 提供了适配器。Ext JS 提供了四种适配器:ext、jquery、prototype、yui。 使用 Ext JS 之前必须先调用适配器,通过这些适配器,可以使用 Ext JS 的应用建立在 JQuery、 Prototype、YUI 等框架之上。 air Air 是在 Ext JS2.0 新增加的功能。它针对 Adobe® Integrated Runtime (AIR)1.0 中应用程序的沙 箱提供运行的支持。xt JS 的 AIR 使用 JS 能轻松实现访问并实现本地的功能,如系统拖盘等。 pkgs pkgs 是 source 编译压缩之后的文件。 docs docs 文件夹是 Ext JS 的使用文档。Ext JS 类的使用说明都可以在该文档中找到。其 OutPut 子 文件夹中的每个 html 文件都对应着每个类的说明。该文档是采用 Ext JS 构建的文档系统。 examples examples 文件夹为 Ext JS 每个类提供实例演示。通过这些实例,用户能很快使用 Ext JS 进行 开发。这些实例涉及到应用系统开发中的方方面面应用,是了解和学习 Ext JS 的最好资料。 resources resources 文件夹包括 Ext JS 所有 CSS 样式及图片资源。CSS 样式在其 CSS 子文件夹中,这些 样式文件在其名称相关的类中应用。images 子文件夹提供了默认风格的图片。 source 该文件夹中用来存放 Ext JS 所有源码文件,读者可以通过该文件夹的文件来分析 ExtJS。下 面 我们还会详细介绍该文件夹。 license.txt INCLUDE_ORDER.txt license.txt 则是指定 Ext JS 的版权信息及免费和商业之间的使用范围。 INCLUDE_ORDER.txt 指明引用 Ext JS 类文件的顺序。 ext-all-debug.js ext-all.js ext-all.js 是编译压缩之后的文件,部署应用系统中使用该文件。ext-all-debug.js 是为了方便调 试开发,开发阶段可以使用该文件。在使用这两个文件之前都必须要引用适配器。 表 1-2 ExtJS 文件夹中的文件 上表中对 ExtJS 压缩包的进行了简介,让读者对 Ext JS 的文件结构有一个大概的了解。 本书主要是分析 ExtJS 如何实现,所以接下来还要进一步介绍 source 文件夹的文件。 文件或子文件夹 说明 adapter adapter 文件夹为 Ext JS 提供了 ext、jquery、prototype、yui 四种适配器源码的实现。 core ExtJS 的核心源码,提供了事件、元素、模板、CSS 查询等基础实现。 data ExtJS 数据模型的源码,为 ExtJS 数据交互提供了极大方便,详细第 6 章。 dd ExtJS 的拖曳的源码。通过该拖曳类,用户能快速简单地实现组件的拖曳。详细见第 9 章。 direct ExtJS3.0 新增功能,为 ExtJS 提供 RPC 和 Comet 两种方式的数据请求方式。 locale ExtJS 的国际化支持,提供了多语言的实现。使用不同的语言,只要引用该文件夹中对应文件。 state ExtJS 组件的状态管理,实现如何去保存和恢复组件运行过程的状态。详细见第 11 章。 util ExtJS 实用工具类的集合,实现了日期、集合、组件事件架构、复合模板等功能。 widgets ExtJS Ui 组件的集合。下面我们会进一步讲解。 debug.js 用来实现了调试功能的源码。 表 1-3 ExtJS 的 source 文件夹中的文件 在上表列出了 ExtJS 源码文件中的相关文件并进行了说明。ExtJS 最重要的组件部分 在 widgets 子文件夹中。 文件或子文件夹 说明 chart 提供了图表功能。可以方便地生成统计报表图。 form 表单的渲染、提交等一系列相关的处理。详细见第 14 章。 grid 数据列表的相关实现。详细第 15 章。 layout 用来构建 EXTJS 布局。详细见第 13 章。 list ExtJS3.0 新增功能,构建在 DataView 基础之上,可以看作简便的列表实现,但更为灵活。 menu 菜单的实现。详细见第 17 章 tips 工具提示。详细见第 12 章。 联系:sharepub@126.com 第 1 章 WEB如此美丽,初探 Ext JS tree 树形组件的实现。详细见第 16 章。 Component ComponentMgr BoxComponent Container Panel TabPanel Viewport Window WindowManager MessageBox 该组是 JS 文件,实现了 EXTJS 组件的的主线架构:组件→BoxCompoent→容器→面板→窗体 →消息窗体。 z 组件(Component 和 BoxCompoent)。用来架构 ExtJS 组件,提供组件的基础功能,详 细见第 11 章。 z 容器(Container)。用来实现子组件的排列和布局。详细见第 12 章。 z 面板(Panel)。在容器布局的基础上,提供了可视的面板管理。详细见 12 章。 z 窗体(Windows)。构建在面板之上,提供了窗体所需的功能。 z 消息窗体(MessageBox)。用来取代浏览器中的 alert、wait 等弹出窗体。 Action Button ButtonGroup CycleButton SplitButton Toolbar SplitBar PagingToolbar 该组是 JS 文件。用来实现动作、按钮、工具栏三部分功能。详细见第 17 章。 z Action。抽象出所有点击动作的相关操作及属性。 z Button。按钮可以分成标准按钮、SplitButton、CycleButton 等类型。 z 工具栏(Toolba)。用来存放工具按钮的位置。在 ExtJS3.0,已经把状态栏给删除。 DataView DatePicker Editor Layer LoadMask Resizable Shadow Slider 该组是 JS 文件。主要用来辅助功能。 z Layer 用来实现浮动层。Shadow 用来实现浮动层的阴影效果。见第 12 章。 z DataView 结合数据模型和模板来实现页面内容。详细见第 6 章。 z Editor 用来实现组件的可编辑性。 z Resizable 用来改变组件的大小。 z DatePicker 实现日历控件。 z Slider:滑动条的效果。 表 1-4 ExtJS 的 widgets 文件夹 通过上面三张表,我们列出 ExtJS 的文件结构。该文件结构的内容对着本书的所有内 容。读者先不需要完全去理解,只要形成一个概要的理解即可。 1.5 本章小结 本章从 ExtJS 的背景讲起,分析了 ExtJS 出现的环境,给出如何学习 ExtJS 及为什么 要学习或使用 ExtJS。还从 ExtJS 的体系结构和其文件包是文件进行了分析,从即从其功 能上做出总体概述,同时还讲解了文件包的文件的作用。最后给了同类的框架的说明,让 读者能根据自己的开发选择合适的应用。 在下一章将通过一个实例要讲解 ExtJS 串通本章所讲的功能及内容。 联系:sharepub@126.com 第 2 章 Ext JS 3.0 实例入门 了解和掌握某个框架,最佳方式是把框架的功能都应用到完整的系统中去,在开发中 学习。办公系统是大家比较熟悉的 B/S 系统,本章通过该系统演示 ExtJS 的主要功能,之 后的章节对每个功能的实现原理深入剖析。 本章是通过办公系统的登录、主框架、人员管理三个页面来演示 ExtJS 的主要功能。 让读者快速了解其全貌并能投入使用。该实例覆盖面广,JavaScript 刚入门的读者,只须 跟着本章一步步地去实现,不必担心对本章内容一知半解。如果学习完后面章节回过头来 看,会有“蓦然回首,她人就在灯火阑珊处”的豁然。 2.1 准备工作,配置环境 Eclipse 是 J AVA 开发中最常用的开发工具,这里以 Eclipse 3.2 作为开发工具。为了 方便编写和调试代码,我们需要装上两个插件: ¾ Spket IDE。该插件安装可以见 1.3 节。 ¾ Tomcat 插件。该插件到 http://www.sysdeo.com/ 下载。安装及配置见其自带文档。 安装上面两个插件之后,就可以通过文件Æ新建Æ项 目,这时会弹出面板,在该面板中输入项目名:“demo”, 之后就可以一直点击下一步,采用默认方式生成项目。 在这个生成的“demo”项目,我们需要把下载的 extjs 整个文件夹(见 1.3 节)都拷到该项目根目录下,如图 2-1。 图 2-1 项目的目录列表 为了使项目目录层次分明,我们需要建立几个子文件,上图中“javascript”文件夹用 来存放该项目的 JS 文件。“pic”文件夹是存放图片目录。为了使该项目能运行起来,我们 还需要在 web-inf 文件夹新建 web.xml 配置文件,如代码清单 2 -1 -1 所示。 代码清单 2 -1 -1 web.xml配置文件 encodingfilter com.morik.util.EncodingFilter encoding UTF-8 联系:sharepub@126.com Ext JS 源码分析与实例宝典 encodingfilter /* 该代码用来配置我们创建的新项目,主要是为了能使编码统一,采用统一的 UTF-8 编 码方式。①处的 com.morik.util.EncodingFilter 类是简单的过滤实现,可以从网上下载或自 行实现。 现在整个项目就可以运行起来,我们点击 Eclipser 工具栏中的启动 Tomcat 图标就运行 该项目,接下来在浏览器输入 http://localhost:8080/demo/index.jsp 就可以看到所测试的网页 效果,说明整个项目已经搭建起来。 2.2 看似简单的登录页面,隐藏好大的学问 登录页面是每个 B/S 系统都必不可的页面,用户只有登录之后才能进入系统进行操作。 登录页面是可以看作应用系统的门面,优雅美观的登录页面会带来良良好的体验,我们办 公系统登录页面的效果如图 2-2 所示: 图 2-2 登录页面 为了实现图 2-2 所示页面,我们首先得在该项目下建立 default.html 文件,用它作为登 录页面。因为采用 Ext JS 方式来实现该页面,所以得在实现该页面时加上 ExtJS 的相关 JS 文件引用。如代码清单 2 -2- 1 所示: 代码清单 2 -2- 1 default.html ③ 联系:sharepub@126.com 第 2 章 Ext JS 3.0 实例入门 第二章 办公系统登录例子 该代码中,除了引用 ExtJS 文件之外,我们还得手动去编写 Login.js 文件,见④处。这 个文件用来处理登录页面渲染、操作等。因为自己编写的代码一般都需要使用 ExtJS 中功 能或使用 DOM 元素,这就得让在它们载入之后才能运行自行编写的代码。不然会出现找 不到函数或找不到元素之类的错误。 ExtJS 提供了 Ext.onReady 函数作为自行编写代码的入口,其参数为自行编写的函数。 我们现在要实现该参数函数。一般来说,该参数函数都应该初始化传输时编码方式、状态 管理、工具提示等。我们实现的代码如代码清单 2 - 2 - 2 所示: 代码清单 2 - 2 - 2 Login.js // Ext.BLANK_IMAGE_URL是空白图片( 1x1px)的地址,默认为 http://extjs.com/blank.gif。 //这依赖于网络。我们一般都是把该图片下载到本地来,这里就存放在 pic的文件夹中 Ext.BLANK_IMAGE_URL = 'pic/blank.gif'; var login = function() { //登陆页面的功能函数 ① Ext.QuickTips.init(); //初始化工具提示,这样组件就能自动工具提示 ② Ext.lib.Ajax.defaultPostHeader += ";charset=utf-8";//初始化传输时编码 ③ //状态管理,这里采用了 cookie的状态管理方式,也就是一些状态的数据保存在 cookie中。 Ext.state.Manager.setProvider(new Ext.state.CookieProvider());④ //实现具体的功能 ⑤ }; Ext.onReady(login); //在ExtJS文件或Dom文档载入之后才运行 login函数 ⑤ 现在登陆页面的初步工作已经完成。接着要做的事就是如何去实现图 2-2 效果。 2.2.1 页面布局 假如美工给了我们如图 2-2 所示的图片,那么如何把它去布局到网页中去。首先要做 的事当然是切图。怎么去切分图片呢?一般都会把它分成上、下、中左、中右四个部分来 进行切分。接下来把这 4 部分拼凑组装起来。组装的方式一般有两种: ¾ 采用 table 布局。 ¾ 采用 div+CSS 布局。 如果采用 table 布局,其布局的代码可以采用如代码清单 2 - 2 - 3 所示: 代码清单 2 - 2 - 3 table布局
top图片
left图片 form表单
button图处
table 布局是传统布局方式,使用简单,但是其精确定位较难,而且表格嵌套表格导致 页面结构混乱,为了解析该问题,于是出现了 div+CSS 布局方式,对于图 2-2 所示的布局, 我们可以采用如代码清单 2 - 2 - 4 所示的代码: 代码清单 2 - 2 - 4 div+CSS布局
联系:sharepub@126.com Ext JS 源码分析与实例宝典
Div+CSS 布局方式,我们需要通过 style 精确确定其每个元素的宽高,之后通过浮动 来实现布局。可以看出 DIV+CSS 布局则需要样式方面知识。其主要问题在于浏览器兼容 性不好,经常会出现布局的元素位置错乱。于是 ExtJS 结合 table 布局和 Div+CSS 布局, 提出更高级的布局方式(详细见第 13 章)对于图 2-2 的上、下、中左、中右四部分的布局, 我们可以采用 ExtJS 的 Border 布局。 Border 布局把一个面板分成上、下,左、中、右五个部分,如果没有指定其中的某些 部分,其相邻的部分就会扩展,占据其它没有指定部分,需要注意的是 Border 布局的中间 部分必不可少,对于图 2-2 的 4 部分,我们可以采用省去 Border 布局中右部分。 ExtJS 的布局功能已经集成在容器类中,我们一般只要通过容器类的子类 Ext.Panel 类 来实现页面布局。在实现布局之前,我们需要在代码清单 2 -2- 1 的 default.html 文件的 body 元素中加上 div 元素用来呈现的 Ext.Panel 类生成的内容:
接下来在代码清单 2 - 2 – 2 的⑤处加入如代码清单 2 – 2 - 5 所示的代码: 代码清单 2 – 2 - 5 login.js 布局片 断 var panel = new Ext.Panel( { //定义面板,用来布局登陆页面 ① renderTo : 'loginpanel', //渲染到指定的 loginpanel元素之内 ② layout : "border", //采用border布局 ③ width : 525, //指定宽高 height : 290, //容器中每个子组件默认加上边框,图片中 4部分不需要边框,取消边框 defaults:{border : false}, ④ items : [ { ⑤ region : "north", //顶部 height : 56, html : '' }, { ⑥ region : "south", //底部 height : 56, html : '' }, { ⑦ region : "west", //中左 width : 253, html : '' }, { ⑧ region : "center", //中右,即中间部分 html : '' }] }); 这段代码我们把图 2-2 切成的四部分采用四个子组件的方式(见⑤处)放在平板中进 行布局。③处指定了布局方式用来布局四个子组件。Border 布局要在每个子组件中指定其 方位,它有 5 种位置的选择:north、south、west、east、center。 指定每个子组件方位之后,我们还要设定其宽高,“north”和“south”方位的子组件 直接采用面板宽度,无需指定,但是要指定高度。位于中间的“west”、“east”方位的子 组件不需要指定高度,但要指定宽度。“center”方位的子组件,无需指定其宽高。 联系:sharepub@126.com 第 2 章 Ext JS 3.0 实例入门 这样面板布局的效果出现,但每个子组件都有边框分隔。所以需要通过④设定其边框 为无。但是现在整个面板并不是呈现在网页的正中间,而是网页的左边。我们可以通过如 下代码来看看: Ext.get('loginpanel').center(Ext.getBody()); 该代码先找到 id 为'loginpanel'的“div”元素,然后让它定位在网页“body”元素中间。 但该居中只能垂直居中,其原因是“loginpanel”元素不是绝对定位,占据文档流,不能采 用 top、left 方式定位(center 函数采用这样方式定位),所以采用如下代码: Ext.get('loginpanel').setStyle('position', 'absolute').center(Ext.getBody()); 现在就可以实现图 2-2 所示效果,但其中右部分还是采用图片模拟,接下一小节,我 们得把该图片换成 form 元素。 2.2.2 表单布局 上一小节中,我们的 form 表单只是采用一幅图片来代替,现在要把它换成 form 表单 元素,从图 2-2 中可以看出 form 区域也需要布局,其内部的 3 个元素分成 3 行排列。对于 Form 布局,我们可以采用了 ExtJS 的 form 布局,该布局已经是 Ext.ormPanel 类的默认布 局方式。 form 布局与其它布局有点不同,因为每个 form 字段都由标签、分隔符、输入框三部分 组成。同时每个 form 字段都占用一行。接下在代码清单 2 - 2 – 2 的⑤处加入如代码清单 2 - 2- 6 所示的代码: 代码清单 2 - 2- 6 login.js部分代码 var form = new Ext.form.FormPanel( { //采用FormPanel类使为form表单的布局面板 ① defaultType : 'textfield', //所有子组件如果没有指定类型,则采用该类型:文本输入框 labelAlign : 'right', //标签的对齐方式:左对齐 labelWidth : 60, //标签的宽度 region : "center", 取代 代码清单 2 – 2 – 5的⑧处位置 defaults:{ border : false }, ② items : [ //fieldLabel作为该字段的标签。 Name用来标识该输入框元素,提交时取值使用 {fieldLabel : '登录帐号', name : 'user'}, //帐号字段 ③ //对于密码,我们还要指定其 inputType来说明其采用密码的形式 {fieldLabel : '登录密码',inputType : 'password',name : 'pass'},//密码字段④ {fieldLabel : '效 验 码', name : 'checkcode'}],//效 验 码字段⑤ buttons : [ { text : '登陆'}, {text : '取消'}] //提交、取消按钮 ⑥ }); 我们已经在上面代码中定义了表单每个元素和布局,运行效果如图 2-3 所示: 联系:sharepub@126.com Ext JS 源码分析与实例宝典 图 2-3 form 表单之后效果图 从图 2-3 中发现效果不像图 2-2 所示,其三个 form 字段对齐左上角区域,而提交与取 消按钮则对齐于布局底部,而且其底色也不统一。怎么办呢?这时得通过 style 来调整,, 在代码清单 2 - 2- 6 的②处加上如下代码: style : 'background:#ffffff;padding:25px 35px 30px 16px;', 从图 2-3 中,我们还可以发现,效验码还有图片部分没有实现。现在需要把效验图片 和效验输入框元素布局在同一行中,ExtJS 的 form 布局实现它有点麻烦,网上也提供相关 的解决方案,比如采用 CSS 来进行浮动定位,其缺点是可能会使整个布局混乱。 这里采用 form 布局嵌套其它布局的方案,尽管有点麻烦,但是不会出现上述问题,在 第 13 章会扩展一个简单方便的 tabelForm 布局,能通过 table 布局的方式来布局 form 表单。 form 布局嵌套其它布局,就是先把这一行采用 Panel 面板来代替,该面板包括两个元 素:form 子组件和图,其布局则可以采用 column 布局把它们分成两列。所以一般会按下 如代码清单 2 - 2- 7 所示的方式实现: 代码清单 2 - 2- 7 form布局嵌套其它布局 { xtype : 'panel', layout : 'column', items : [ { columnWidth : .6, ① fieldLabel : '效 验 码', name : 'checkcode'}, { xtype : 'panel', ② columnWidth : .4, html : ''}] } 如果把这段代码替换代码清单 2 - 2- 6 中⑤处的组件代码,会看到如图 2-4 所示效果: 联系:sharepub@126.com 第 2 章 Ext JS 3.0 实例入门 图 2-4 form 布局嵌套其它布局之后效果图 从图 2-4 中,可以发现第三行加上边框线,而且没有标签。这是什么原因呢?原来是 form 面板中缺省配置项并没有应用到该子面中来,所以要在代码清单 2 - 2- 7 中的每个子 组件上加上“border : false”。 标签没有出来怎么办呢?我们得找原因,这是因为 form 布局也不会解析非 form 布局 中的子组件,即解析 fieldLabel 属性。即代码清单 2 - 2- 7 的①处的 fieldLabel 无效。为了 让 FormPanel 能解析到该属性,我们需要在该组件外面套上 form 布局,使其成为 form 布 局面板的子组件,把 代码清单 2 - 2- 7 的①处的子组件代码改成如代码清单 2 - 2- 8 所示: 代码清单 2 - 2- 8 form布局嵌套其它布局改进 { columnWidth : .6, layout : 'form', items:[{xtype:'textfield', anchor : '98%', fieldLabel :'效 验 码', name : 'checkcode' }] }, 这样就可以达到图 2-2 的效果,但是其验证码图片现在还是静态的图片,下一小节中, 我们来完善它。 2.2.3 验证码 在上一小节中,我们采用静态图片作为验证码图片,而在实际中都是动态生成图片。 该图片由服务器端动态生成,之后写入输出流。因为其输出的是一幅图片,所以只要在图 片的 src 中指明这该请求地址即可,如。 在这里我们可以采用 Servlet 技术来动态生成图片,首先在 web.xml 文件中配置该 Servlet 及路径。在 web.xml 中加上如下代码片断,如代码清单 2 - 2- 9 所示: 代码清单 2 - 2- 9 动态生成图片配置 validationcodeServlet com.morik.util.ValidationCodeServlet 联系:sharepub@126.com Ext JS 源码分析与实例宝典 validationcodeServlet /IMG.action 这样就可以通过如的形式来获取图片,当然我们还得实现其生 成图片的 Servlet 代码。该 Servlet 代码主要是根据指定宽、高来动态生成含数字或文字的 图片,生成之后写入输出流。同时把图片上的内容(数字或文字)写在 session 中。如果 需要判断就可以通过 session 来取得其保存的值和用户输入的值进行比较。读者可以通过 网络去找到相关的实现。 通过只是一次获得图片,怎么实现每次点击就会更换图片并且 不会刷新整个页面?这里需要了解图片请求和页面请求并不是同步的。也就是说只要再次 请求该图片就可以实现局部的刷新。只要在 img 标签上加上如下代码好可: onclick=" this.src= 'IMG.action?time='+new Date()" 该代码中为什么要加上动态的时间呢?这里主要是为了防止浏览器缓存图片,对于不 同的请求,它才会看作是不同的图片。所以我们只要把上面代码清单中的 checkcode 的图 片代码用下面代码来替换,就可以动态去获取到图片。把代码清单 2 - 2- 7 中②处换成如 下代码即可: 代码清单 2 - 2- 10 动态生成效验图片 { width : 60, border:false, html : '' } 这样通过 Panel 类的 Html 来实现并不直观,在第 11 章中把 checkCode 图片实现为组 件的形式,调用更为方便直观。 2.2.4 表单验证 表单验证是表单应用中重要的部分,验证可以分成两种类型:客户端验证和服务器端 验证。应用一般都会结合这两种验证,先在客户端通过 JS 验证一些业务无关的格式,如 长度、非空、email 地址等,之后再在服务器端验证业务相关的内容。 我们的办公系统,其登录帐号一般都是取姓的拼音+名字拼音的首字母,如刘婷采用 “liut”。一般说来登录帐号在 2~6 位字母之间,只能是字母。密码长度不能少于 4 位。 首先将代码清单 2 - 2- 6 的②处的 defaults 配置项改成如代码清单 2 - 2- 11 所示的代 码: 代码清单 2 - 2- 11 客户端验证 defaults : { border : false, allowBlank : false, //非空验证 blankText : '该字段不允许为空 ',//非空验证时出错提示内容 msgTarget : 'side',//在字段右边显示提示内容 }, 联系:sharepub@126.com 第 2 章 Ext JS 3.0 实例入门 这是登录帐号和密码组件都共有配置项,allowBlank 说明两者都不能为空,如果为空, 就显示 blankText 中指定内容。其位置在组件右边显示。该种显示方式只是显示红色的出 错小图标(见图 2-5),当鼠标放在上面它会提示出错信息。 登录帐号、登录密码组件还要分别进行独立的格式判断,在登录帐号的组件中,我们 添加下面的配置项: regex:/^[a-zA-Z]{2,6}$/,regexText:'只能为两到六位的大小写字母。 ' 在登录密码组件中加上如下的配置项: regex:/^.{4,}$/, regexText:'长度不能少于 4位' 这样就可以实现上面要求的验证。每个文本框组件都有 regex 配置项,它是用来指明 验证的正则表达式,regexText 用来指定该正则表达式没有通过时,提示什么样的验证出错 信息,如图 2-5 所示: 图 2-5 客户端验证 当客户端验证通过时,我们把用户名和密码传到服务器,服务器也要进行相关验证, 如没有找到用户名,则提示改用户不存在,如果找到用户名,密码错误则提示密码不正确。 那么客户端又是如何获得这些信息呢?又如何显示出来呢? 这个时候服务器返回的信息是要遵循一定的格式,默认的情况是如下形式的 json: {success:false,errors:[{id:’user’,msg:’该用户不存在 ’},{id:’pass’,msg:’密码不对’}] 代码中 success 用来指定返回是否成功的标识,为 false 表示出错,这个时候我们要通 过 errors 列出错误项,每项都应该指定 id,该 id 与 form 子组件的 name 相对应。而 msg 则是指定出错提示。该提示会如图 2-5 一样显示出来。 2.2.5 表单提交 提交 form 表单既可以采用传统的表单提交,也可以通过 Ajax 方式。ExtJS 的 form 组 件支持两种方式,但其默认方式则是采用 Ajax 提交。 在代码清单 2 - 2- 6 中,我们已经给出表单面板中的 buttons 配置项用来实现提交按键 和复位按钮。但那里仅仅是给出文字样式,没有给出处理代码。当点击提交按钮时,其会 把 form 子组件串成查询字符串和指定的 url 地址向服务器端提交数据。复位则比较简单, 只要把 form 子组件(即文本框)的内容都恢复到初始值,如图 2-2 所示。 所以我们需要把代码清单 2 - 2- 6 的⑥处改成如代码清单 2 - 2- 12 所示的代码: 联系:sharepub@126.com Ext JS 源码分析与实例宝典 代码清单 2 - 2- 12 login.js中代码 buttons : [ {text : '登陆', handler : function() { ① form.getForm().submit( { //进行提交 url : 'login.jsp' //提交的Url地址 ② //当请求成功之后,就要返回主页面的地址,然后跳转到主页面。 success : function(f,a) {window.location.href = a.result.url;}, });}}, ③ { text : '取消', //复位到初始值 //调用form的reset方法进行复位 handler : function() {form.getForm().reset();} ④ }] 对于一个表单提交,我们首先要给定请求的地址,该地址在②处给出,它通过 submit 函数的参数对象的配置项来指定。如果成功执行③处的 success 函数,跳转到服务器返回 的主页面地址。 我们可以看到③处的 success 回调函数有两个参数:第一个是当前的 form 组件,第二 是服务器返回的文本数据,之后解码为 JSON 对象。讲到这里,读者也许会问,如果出错 怎么办呢?出错了,我们可以通过配置 failure 的回调函数来处理,一般只需要像上一小节 的处理那样,formPanel 会自动完成出错处理并进行提示。 接下来需要实现服务器端如何去处理客户端的请求,具体参看代码清单 2 – 2 - 13: 代码清单 2 – 2 - 13 login.jsp中代码 <%@ page language="java" pageEncoding="UTF-8"%><% ① //获得客户端 form表单传入的字段及值 String name = request.getParameter("user"); String pwd = request.getParameter("pass"); String code = request.getParameter("checkcode"); //从session中取得验证码 String scode = (session.getAttribute("validate_code")).toString(); //用户名和密码通过验证时返回的数据 if("prk".equals(name)&&"123456".equals(pwd)&&scode.equals(code)){ out.println("{success:true,url:\"main.html\"}");} else { //没有通过验证时返回的数据 out.println("{success:false,errors:["); if(!"prk".equals(name)) out.println("{id:\"user\",msg:\"用户名不对\"}"); if(!"123456".equals(pwd)) out.println(",{id:\"pass\",msg:\"密码不对\"}"); if(!scode.equals(code)) out.println(",{id:\"checkcode\",msg:\"验证码不对 \"}"); out.println("]}"); }%> 现在读者只要在登陆页面输入“prk”帐号和“123456”密码就可以成功跳转到主框架 页面,见 2.3 节。如果输入其它值,则会出现类似图 2-5 的出错提示。已经能成功运行, 但是在提交的等待过程中,页面不会出现任何变化,用户很有可能认为没有提交,而实际 上正在处理之中。那么如何提示用户呢? 一般的处理是把浮动层遮罩 form 表单之上,并显示相关提示:“如正在提交,请稍等...” 之类的信息。该遮罩层会阻止用户进行其它操作,防止多次重复提交。这个功能称着遮罩 联系:sharepub@126.com 第 2 章 Ext JS 3.0 实例入门 提示,如图 2-6 所示: 图 2-6 遮罩提示 该遮罩提示如果需要自行实现有点麻烦,ExtJS 已经把它集成到元素之中,对于 form 表单来讲,只要代码清单 2 - 2- 12 的③之后加上一句:waitMsg : '正在提交,请稍等...'。 这个是用来指定要显示的提示信息,如图 2-6 所示。 仅仅加上这些是不够的,我们还在代码清单 2 - 2- 6 的 formPanel 的配置中加入如下 配置项:“waitMsgTarget : true,”。该配置用来指定等待提示信息显示的位置。设定为 true 时表明在当前 form 元素的中间。登录页面的实现到此为止就已经实现完成。 2.3 主框架页面 在上一节中,当提交成功就会跳转到 main.html 页面,该页面就是我们要实现的主框 架页面。在传统的 B/S 系统实现中,我们一般都会采用 frame 来把主框架页面分成几个部 分,如代码清单 2 – 3 - 1 所示: 代码清单 2 – 3 - 1 frameset的使用

pdf贡献者

zwmx

贡献于2011-10-01

下载需要 20 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!