第 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 文件引入依赖的 类库就可以，如/// 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布局
table 布局是传统布局方式，使用简单，但是其精确定位较难，而且表格嵌套表格导致 页面结构混乱，为了解析该问题，于是出现了 div+CSS 布局方式，对于图 2-2 所示的布局， 我们可以采用如代码清单 2 - 2 - 4 所示的代码： 代码清单 2 - 2 - 4 div+CSS布局 
' }, { ⑥ 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的使用
| top图片 | |
| left图片 | form表单 |
| button图处 | |
联系：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 中指明这该请求地址即可，如' } 这样通过 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的使用