轻松搞定ExtJs

cfl520

贡献于2010-09-17

字数:0 关键词: ExtJS JavaScript框架

轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 1 页 共 264 页 1 目 录 目 录..............................................................................................................................................1 第一章:序 ..............................................................................................................................6 第二章:准备与资源 ..............................................................................................................9 一、下载 ..........................................................................................................................9 二、拦路虎 ......................................................................................................................9 三、布署环境.................................................................................................................11 四、SpketIDE.................................................................................................................12 五、资源 ........................................................................................................................16 六、小结 ........................................................................................................................16 第三章:Ext OOP 基础.........................................................................................................17 一、javascript 类的定义................................................................................................17 二、Extjs 命名空间的定义 ...........................................................................................17 三、Extjs OOP...............................................................................................................17 四、配置(config)选项....................................................................................................19 五、Ext.apply()和 Ext.applyIf().....................................................................................20 六、小结 ........................................................................................................................21 第四章:消息框 ....................................................................................................................22 一、话说消息框.............................................................................................................22 二、最简单的消息框——提示框.................................................................................23 三、输入框 ....................................................................................................................23 四、确认框 ....................................................................................................................24 五、自定义消息框.........................................................................................................24 六、进度条对话框.........................................................................................................25 七、让消息框飞出来.....................................................................................................26 八、小结 ........................................................................................................................27 第五章:页面与脚本完全分离.............................................................................................28 一、Extjs 是脚本的世界 ...............................................................................................28 二、Ext.onReady 事件...................................................................................................28 三、来自 Extjs 的问候 ..................................................................................................29 四、让界面动起来.........................................................................................................29 五、Ext.Fx 类.................................................................................................................30 六、Ext.Element 类中的动画函数................................................................................34 七、小结 ........................................................................................................................35 第六章:元素操作与模板.....................................................................................................36 一、重要也不重要的东西.............................................................................................36 二、Ext.DomHelper 类 ..................................................................................................36 三、Ext.XTemplate........................................................................................................38 四、小结 ........................................................................................................................39 第七章:格式化 ....................................................................................................................40 一、用户需要优秀体验的内容.....................................................................................40 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 2 页 共 264 页 2 二、Ext.util.Format 类...................................................................................................40 三、再谈 XTemplete......................................................................................................44 四、如果连 Format 都不能满足 XTemplete 的需要呢?............................................45 五、小结 ........................................................................................................................45 第八章:Extjs 组件结构 .......................................................................................................46 一、Extjs 的组件结构远比我们想象的复杂................................................................46 二、组件分类.................................................................................................................47 三、组件的生命周期.....................................................................................................48 四、组件渲染方法 render.............................................................................................50 五、小结 ........................................................................................................................52 第九章:按钮与日期选择器.................................................................................................53 一、开始组件学习之旅.................................................................................................53 二、被设计得面目全非的按钮.....................................................................................53 三、日期选择器 Ext.DatePicker...................................................................................55 四、小结 ........................................................................................................................56 第十章:数据与 ComboBox.................................................................................................57 一、数据在这里是动词.................................................................................................57 二、Ext.data.DataProxy 类 ............................................................................................57 三、Ext.data.DataReader 类...........................................................................................58 四、Ext.data.Store 类.....................................................................................................59 五、下拉列表框.............................................................................................................60 六、得到下拉列表框的值.............................................................................................62 七、源代码 ....................................................................................................................63 八、小结 ........................................................................................................................64 第十一章:Ajax 与 ComboBox............................................................................................65 一、Ajax.........................................................................................................................65 二、Ext.Ajax 类.............................................................................................................65 三、Ajax 文件上传........................................................................................................67 四、你来自远方.............................................................................................................72 五、小结 ........................................................................................................................73 第十二章:分页与 ComboBox.............................................................................................74 一、关于分页.................................................................................................................74 二、从 Servlet 获取当前页数据 ...................................................................................74 三、创建 ComboBox.....................................................................................................76 四、小结 ........................................................................................................................77 第十三章:面板(Panel)....................................................................................................78 一、漂亮的窗格从这里开始.........................................................................................78 二、Ext.Panel 类............................................................................................................78 三、小结 ........................................................................................................................83 第十四章:Panel 的子类——Window 窗口 ........................................................................85 一、概述 ........................................................................................................................85 二、Ext.Window 类 .......................................................................................................85 三、实现 Window 的最小化功能.................................................................................87 四、小结 ........................................................................................................................91 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 3 页 共 264 页 3 第十五章:Panel 的子类——FormPanel.............................................................................93 一、无处不在的表单.....................................................................................................93 二、Ext.form.FormPanel 类...........................................................................................93 三、提交表单至服务器.................................................................................................97 四、小结 ......................................................................................................................100 第十六章:更多表单组件...................................................................................................102 一、您能说出哪些表单组件呢?...............................................................................102 二、表单组件关系图...................................................................................................102 三、组件配置选项介绍...............................................................................................103 四、完整源代码...........................................................................................................107 五、小结 ......................................................................................................................112 第十七章:悬停提示与验证...............................................................................................113 一、悬停提示...............................................................................................................113 二、悬停提示的用法...................................................................................................114 三、表单组件验证.......................................................................................................118 四、小结 ......................................................................................................................120 第十八章:FormPanel 布局与初始化................................................................................121 一、布局概述...............................................................................................................121 二、分割吧!...............................................................................................................121 三、表单初始化...........................................................................................................126 四、小结 ......................................................................................................................131 第十九章:叹为观止的表格组件——GridPanel...............................................................132 一、表格、表格面板...................................................................................................132 二、列模型与数据.......................................................................................................132 三、加强版的列模型...................................................................................................135 四、小结 ......................................................................................................................138 第二十章:行模型与 Grid 视图 .........................................................................................139 一、行选择模型...........................................................................................................139 二、Grid 视图..............................................................................................................143 三、小结 ......................................................................................................................147 第二十一章:GridPanel 分页 .............................................................................................148 一、跑跑题——JSON-LIB.........................................................................................148 二、分页工具栏...........................................................................................................154 三、分页 ......................................................................................................................154 四、小结 ......................................................................................................................157 第二十二章:GridPanel 扩展 .............................................................................................158 一、学会自学吧,朋友...............................................................................................158 二、带摘要的 GridPanel.............................................................................................158 三、RowExpander........................................................................................................162 四、分组 GridPanel.....................................................................................................165 五、将带摘要的 GridPanel 和分组 GridPanel 合二为一 ..........................................168 六、小结 ......................................................................................................................171 第二十三章:可编辑的 GridPanel——EditGridPanel.......................................................172 一、EditGridPanel........................................................................................................172 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 4 页 共 264 页 4 二、编辑订单数据.......................................................................................................173 三、保存修改的数据至服务器...................................................................................178 四、处理请求...............................................................................................................179 五、完整源代码...........................................................................................................181 六、验证 ......................................................................................................................186 七、替换选择模型.......................................................................................................187 八、小结 ......................................................................................................................187 第二十四章:树与选择模型...............................................................................................188 一、树——TreePanel...................................................................................................188 二、创建简单的 TreePanel..........................................................................................189 三、选择模型...............................................................................................................192 四、MultiSelectionModel............................................................................................195 五、带复选框的节点...................................................................................................195 六、小结 ......................................................................................................................199 第二十五章:动态操作树节点...........................................................................................200 一、概述 ......................................................................................................................200 二、基本操作...............................................................................................................201 三、事件 ......................................................................................................................203 四、小结 ......................................................................................................................204 第二十六章:远程获取节点数据.......................................................................................205 一、 概述 ....................................................................................................................205 二、异步加载解析.......................................................................................................206 三、小结 ......................................................................................................................212 第二十七章:选项卡面板——Ext.TabPanel.....................................................................214 一、关于魅族和 M8....................................................................................................214 二、TabPanel 概述.......................................................................................................214 三、TabPanel 标签操作...............................................................................................216 四、标签弹出菜单.......................................................................................................217 五、小结 ......................................................................................................................220 第二十八章:Viewport 类...................................................................................................221 一、概述 ......................................................................................................................221 二、Viewport 的基本使用...........................................................................................221 三、小结 ......................................................................................................................226 第二十九章:综合项目.......................................................................................................227 一、概述 ......................................................................................................................227 二、数据库设计...........................................................................................................228 三、持久层封装...........................................................................................................229 四、DAO......................................................................................................................235 五、业务层 ..................................................................................................................238 六、控制器 Action.......................................................................................................242 七、Spring 配置文件...................................................................................................249 八、主界面 ..................................................................................................................251 九、添加新员工...........................................................................................................253 十、员工信息维护.......................................................................................................255 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 5 页 共 264 页 5 十一、效果图...............................................................................................................261 十二、小结 ..................................................................................................................262 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 6 页 共 264 页 6 第一章:序 第一次看到 Extjs 的效果,我被深深震撼了。这真是一个了不起的框架,统一的效果、 丰富的控件、强大的功能、能任意改变的皮肤、完美的浏览器兼容、原生态的 ajax、多种数 据格式的支持、插件……我不知道该如何去表达我的兴奋和喜悦,就像年少时候看到一个心 怡的姑娘,怦然心动。 Extjs 是一个 javascript 框架,其开发团队的核心开发人员 Jack 将 OOP 应用到极致,我 们不得不感叹,看起来不得要领的 javascript 语言居然也是如此优雅和无懈可击,在 Jack 的 眼里,javascript 就是一位贵夫人,看上去高傲、目空一切、全无亲切感,但只要认真去研 究去组织,就会得到贵夫人的欢心,但是,很抱歉,Jack 已捷足先登,并且生了一个孩子— —Extjs。 在国外,许多大师值得我们敬佩,他们想象力丰富,思想前卫,长着一双鹰眼,具有无 可比拟的洞察力。这些大师能觉察到将来 IT 的发展方向,走在各个领域的最前沿。我们— —我、每一位老师,更 包括在北大青鸟学习的莘莘学子——应该多去感受他们的精神,开拓、 创新、勇往直前,培养战胜一切困难和险阻的勇气。 在很多很多大师们的努力下,一个个框架被开发出来并广泛应用,而我现在要和大家分 享的,是 Jack 给我们带来的 Extjs。从现在开始,让我们熟悉并记住这个名字,然后,一起 步入富客户端打造的美丽殿堂。 这是一个连载,因为我不可能在一夜之间将所有的东西都写出来,但我同样不想等写完 之后再和大家分享,那样太迟了。我想,你的心情同我一样迫切,不过,让我们慢慢来,水 滴石穿,每天进步一点点,一段时间后,回首走过的路,虽然充满艰辛,但更多的是成就, 是一种成长的快意。 先看一张截图如何? 你做过这样的表格吗? 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 7 页 共 264 页 7 你见过能分页的下拉列表框吗? 一些看起来很复杂甚至让我们望而却步的功能,使用 Extjs 却可以轻易实现。事实上, 远远不止这些,官方网站提供了非常多的示例,大部分可以直接拿到项目中使用,这些资源 是一笔宝贵的财富,是提高生产力的法宝。 现在,Extjs 得到了越来越多的厂商的认同,在项目中被广泛应用。有些北大青鸟毕业 的学生在公司主要负责 Extjs 技术,构建富客户端的工作。使用成熟的框架,能大大降低企 业运营的风险,获取客户的高度认同,甚至,连美工都省了。 本文档作为株洲北大青鸟学生的 extjs 自学资料,在网上会同步更新,网址是: http://hi.baidu.com/ext_js。 让我们开始吧…… 李赞红 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 8 页 共 264 页 8 2009-4-30 中国·株洲北大青鸟 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 9 页 共 264 页 9 第二章:准备与资源 一、下载 要开始 Extjs,必须先从网上下载所有需要的文件。目前的稳定版为 Extjs2.2,3.0 也快 发布了。下载的文件解压后,包含若干个文件夹和文件,作用分别如下: adapter 文件夹:该文件夹包含了 extjs 和其实框架如 jquery、yui、prototype 的桥接器, 用于 Extjs 和这些框架的友好整合。 build 文件夹:包含了所有 js 文件的紧凑压缩版,方便网络传输,提高下载速度。 docs 文件夹:Extjs 的帮助文档,遗憾的是要先布署在服务器上才能访问。网上有人制 作了无需布署的版本。 examples 文件夹:自带的示例全部在该文件夹中,一定记得去看看。 resources 文件夹:包含了 Extjs 所需要的样式表文件和图片资源。 source 文件夹:源代码文件夹,没有经过压缩的版本。 ext-base.js:基础类库。 ext-core.js:核心类库。 ext-all.js:类库完整版。 ext-all-debug.js:带格式的未压缩的类库完整版,带调试功能。 ext-core-debug.js:带格式的未压缩的核心类库。 CHANGES.html:开发及升级日志。 license.txt:协议,比较复杂,但用惯了盗版的我们来说完全不予理会。 二、拦路虎 在学习之前,有一些问题需要澄清一下,不然,碰到问题的时候准会傻眼。我们还会在 后面不断提醒,但事先让您知道也许是个不错的主意。 问题 1:导入 js 文件后,在 js 文件中定义的中文显示在页面后为什么会出现乱码? 问我算是问对人了,因为我为这事迷糊了一整天。乱码问题在 JavaEE 中司空见惯,但 没有哪个的头疼度能和 Extjs 比。简直太伤人了。 我们还得一二三逐步来,不然死了都不知道是怎么死的。 在 MyEclipse 中,js 文件的默认编码是 Iso-8859-1,这种编码和中文水火不容,从下面的界 面中可以改成别的编码,如 gbk,其实我建议大家使用 utf-8,根据我的经验,utf-8 出现乱 码的机率比较少。 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 10 页 共 264 页 10 在页面中导入 js 文 件是,要指明字符集编码,形如: 为了绝对的安全,将 eclipse 工作区的编码变成 utf-8,现在您也许不信,因为不改确实很好 呐,可是,等到万一出现问题的时候,千万别怪我没告诉你。 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 11 页 共 264 页 11 问题 2:为什么同样的程序在 IE 和 Firefox 中显示不同? Extjs 在很多情况下使用 11px 字体,11px 大小是一种边缘字体,不同的浏览器对 11px 的渲染各不相同,IE 的渲染和 12px 相似,而在 Firefox 中,则和 10px 相似,导致字体在 FF 中过小的问题。当然,英文看不出来,中文则相当别扭。像我这种追求完美的人是无法忍受 的。网上有一些文章能解决一部分问题,但不能解决全部问题,一不做二不休,我们干脆打 开 extjs/resources/css/ext-all.css 文件,把里面的 11px 全部替换成 12px,OK,成了。 问题 3:为什么有些图片无法显示? 对不起,你的描述其实不对,不是有些,只有一张图片显示不出来,但这张图片的影响 力太大了,可以说牵一发而动全身。为了配合皮肤,需要一张 1*1 大小的空白图片,变态的 是,这张图片不是从本地获取的,而是访问了 http://extjs.com/s.gif,也就是说,访问了网络 上的图片,如果没有连网,就会出现图片无法显示的情况。解决的方案是,在 js 文件中添 加 如 下 语 句 : Ext.BLANK_IMAGE_URL = "../extjs/resources/images/default/s.gif"; BLANK_IMAGE_URL 是 Extjs 中定义的一个常量,我们重新赋了新值。但是,由于环境不 同,您的路径可能会有些许变化。 三、布署环境 把“布署环境”四个字拿出来,显然是吓人的,不就是脚本吗?不过,如果出错又解决 不了,自信心会被严重打击,还是听我说吧。 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 12 页 共 264 页 12 请先将必要文件导入您的工程,以下是最精简的结构: ext-lang-zh_CN.js 是为了本地化的需要,没别的用途。 众所周知,我们习惯将 javascript 写成独立的 js 文件,方便维护和共享,在页面中如果 要访问 js 文件,需要使用 script 标签导进来,Extjs 有两个 js 文件是必须的,如下: 还是那句话,由于上下文环境不同,您的实际情况可能和上面的不一样,由 js 文件的 实际路径决定。 同样,CSS 也同样要导入到工程中。以下是全部需要导入的文件: 要注意的是,不要随意调整各文件的顺序,特别是 ext-base.js 必须在 ext-all.js 文件之前, 记住了! 四、SpketIDE “工欲善其事,必先利其器”,再厉害的程序员,如果没有好的智能开发工具,效率也不 可能提高。好的 IDE 能减少代码出错的机会,并对代码文件进行高效管理。事实上,因为 javascript是弱弱弱类型语言,市面上没有像eclipse这样的集成开发环境帮助我们写javascript 代码,但是,勉强能用的还是不少,SpketIDE 就是其一。 SpketIDE 在 Vs Stduio 和 Eclipse 平台上都有相应的插件。本人是搞 JavaEE 的,对 NET 方向无法作出交待,下面介绍 SpketIDE for Eclipse 的安装和使用。 1、 首先手头上要有 spket-1.6.16.zip 文件,从网上可以下载,或者从学校 FTP 上获取。 我现在使用的版本是 1.6.16; 2、 将 spket-1.6.16.zip 文 件 解 压 , 复 制 文 件 夹 所 在 目录,如: E:\LiZanhong\Devolpment\ext-2.0.2\spket-1.6.16,如果没有意外,下一级目录应该是 eclipse,千万不要复制 eclipse; 3、 切换到 eclipse 所在目录,并进入 links 目录(如果不存在,自己创建一个), 如 : D:\Program Files\MyEclipse 6.5\eclipse\links,在该目录中创建一个文本文件,文件名 为 :“ skpet.1.6.16.link ”, 用 记 事本打开文件,输入内容:path= E:\\LiZanhong\\Devolpment\\ext-2.0.2\\spket-1.6.16; 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 13 页 共 264 页 13 4、 重新启动 Eclipse,如果安装成功,在 Window->Preferences 中会出现 Spket 的选项。 5、 下面的图能说明问题 点击右上角的“new…”按钮,弹出下面的对象框: 输入任意名称,如“extjs”,点击“OK”后,选中新加的“extjs”节点,单击“add library…”按钮,如下图所示: 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 14 页 共 264 页 14 选择“ExtJS”,如下图: 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 15 页 共 264 页 15 选中“ExtJS”,单击“Add File”按钮,弹出下面的对话框: 想办法在 extjs 的文件夹中找到 ext.jsb 文件,打开后最后应该是下面这个样子: 至少,SpKetIDE 安装完成。 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 16 页 共 264 页 16 五、资源 最好的资源自然是官方提供的 AIP 文档和示例,这些东西很宝贵啊,虽然是洋文,但 还是值得去研究。 另外,去上网吧,不是为了游戏,也不是为了聊天和娱乐,而是为了淘到更多的东西帮 助我们学习——这才是正途。 这里提供一个:http://www.ajaxjs.com/ajaxjs/index/,去看看吧。 六、小结 万事开头难,把编程中一些常见的实际问题解决后,剩下的就是着手去学习。再加上一 个好的开发工具,更加得心应手。 网上的资源非常丰富,免费的不要真是太浪费了。经常逛逛技术论坛,和经验老手交流 学习,不愧是进步的一种方式。可以说,在网上没有找不到的东西,但学会提炼、筛选、吸 收,更为重要。 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 17 页 共 264 页 17 第三章:Ext OOP 基础 一、javascript 类的定义 在 javascript 中,通过创建一个构造函数来定义一个类,然后通过 prototype 来扩展类的 功能。假设我们定义一个螃蟹类: Crab = function(){ this.legs = 10; } Crab.prototype = { say: function(){ alert("我是一只螃蟹,我有" + this.legs + "只脚,横行霸道是我的天性"); } }; //测试 var crab = new Crab(); alert(crab.legs); crab.say(); prototype 是 javascript 一个非常重要的功能,能动态的为对象添加任何新的方法。Extjs 就是基于 prototype 实现的 OOP 机制。 二、Extjs 命名空间的定义 命名空间(namespace)类似于 java 中的包,用来对工程中的类进行有效管理。命名空 间的层次结构使用“.”来划分。Ext 通过 namespace()方法创建命名空间。 语法:Ext.namespace(“命名空间”) 示例:Ext.namespace("com.aptech"); 三、Extjs OOP 在 Extjs 中创建类和 javascript 有些不同,我们会使用他封装好的东西,而不全是基于 javascript 语法。站在巨人的肩膀上,确实有些高处不胜寒。所以,深刻了解 javascript 基础 对于日后的拓深十分必要,相信我吧。 我们通常会基于命名空间创建新类,按照 java 的设计思想,会有封装、继承和多态。 Extjs 也不例外,而且 Extjs 为 OOP 做了很多基础工作,使用起来非常模式化。一个类至少 应该有 private 和 public 成员,且可以派生出子类,并能重写父类的方法。那么,让我们来 看看 Extjs 是如何做到的。 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 18 页 共 264 页 18 Ext.namespace("com.aptech"); com.aptech.First = function(){ //私有成员 var kiss = "中华人民共和国"; //私有方法 //公有方法 return { //公有成员 init: function(){ alert("init"); alert(kiss); }, //公有成员 method: function(){ alert("method"); } }; }; 我们定义了一个类 First,这实在是一个没有任何业务意义的类,只是为了说明方便。 First 位于 com.aptech 命名空间中,有一个私有成员 kiss,并且向外部暴露了两个方法 init() 和 method()。其实,在 function 和 return 之间定义的成员全总是 private,而在 ruturn 内部定 义的成员全部是 public,如果大家的 javascipt 基础扎实的话,这段代码并不难理解,我们定 义了一个匿名构造函数,函数中的变量是局部变量,外部无法访问,返回一个对象,对象是 以 json 格式定义的,该对象中定义的方法自然可以访问了。 javascipt 本身不支持继承,但是我们可以模拟。继承说穿了就是子类将父类的成员据为 已有,专业点就是“成员复制”,即可以复制成员变量,也可以复制成员方法。我们定义下 面的方法完成此功能: var extend = function(child, father){ child.prototype = father.prototype; } 现在,我们定义一个螃蟹的子类——蟹将,螃蟹成精变成了人,由原来的 10 只脚变成 2 只脚,但狗改不了吃屎,行为不会改变,依旧横行霸道。 GenCrab = function(){this.legs = 2;}; extend(GenCrab, Crab); var gc = new GenCrab(); gc.say(); 就这样,一个新类产生了。不过,在 Extjs 中有更加优雅的做法。 我们定义一个类 Second,继承自 First,看看 Extjs 是如何做的。 //创建子类 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 19 页 共 264 页 19 com.aptech.Second = function(){ com.aptech.Second.superclass.constructor.apply(this);//调用父类构造方法 } //com.aptech.Second 子类继承自父类 com.aptech.First Ext.extend(com.aptech.Second, com.aptech.First, { //新方法 fun: function(i){ return i * i * i; }, //重写的方法 method: function(){ alert("Second::method") } }); //测试 var second = new com.aptech.Second(); alert(second.fun(5)); second.method(); 哈哈,简直太优雅了,不仅可以添加新方法,还可以重写父类的方法(话外音:这不是 多态的表现形式吗?)。这一切都是由 Ext.extend()搞定的,这个方法有点复杂,但他的实现 原理是相同的。 四、配置(config)选项 在 Extjs 中,初始化对象时,大量使用了 config 这个参数。不要恐惧,只是一个 json 对 象而已,不过,config 为 Extjs 立下了不少汗马功劳。 假设定义了一个学生类(Student), 有 姓 名和性别两个属性,并且通过构造函数为属性 初始化: Student = function(name, sex){ this.name = name; this.sex = sex; } //测试 var student = new Student("李赞红", "男"); alert("姓名:" + student.name + "\r\n 性别:" + student.sex); 这个一定看得懂,如果看不懂,我只能表示深深的遗憾了,您不适合地球,回你的老本 营火星去吧。 如果用 json 对象作为构造函数的参数呢? Student = function(config){ 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 20 页 共 264 页 20 this.name = config.name; this.sex = config.sex; } //测试 var student = new Student({name: "李赞红", sex: "男"}); alert("姓名:" + student.name + "\r\n 性别:" + student.sex); 嘿,果然万变不离其宗啊。换汤不换药的把戏骗不了咱们。但是,等等,请等等,如果 类的成员特别多,十个,二十个,一百个,赋值语句岂不是很多很繁琐?你能想到这一点实 在太聪明了,不过,Jack 更聪明,他早想到了,于是有了下面的代码: Student = function(config){ Ext.apply(this, config); } //测试 var student = new Student({name: "李赞红", sex: "男"}); alert("姓名:" + student.name + "\r\n 性别:" + student.sex); Ext 定义了一个名叫 apply()的方法,作用是将第二个参数的成员赋给第一个参数。现在, 不管 config 中有多少个成员都没问题了。 五、Ext.apply()和 Ext.applyIf() 前面我们知道了 Ext.apply(obj, config)方法的作用,还有另一个方法 applyIf(obj, config), 从名字上看得出来,applyIf()需要满足某种条件,实在是太棒了,这么复杂的问题都没逃过 你的法眼。 事先预告一下这两个方法的区别,然后再通过例子来说明:apply 会将 config 和 obj 参 数的同名属性值覆盖,并且将 config 其他属性添加到 obj 中;applyIf 不会将 config 和 obj 参 数的同名属性覆盖,只将 config 其他属性添加到 obj 中。也就是说,obj 没有而 config 中有 的属性最终都会复制到 obj 中,不同的是相同属性值是否会被覆盖的问题。 例子能说明一切问题。 Student = function(config){ this.name = "张海军"; this.sex = "男"; Ext.apply(this, config); } //测试 var student = new Student({name: "李赞红", sex: "男", birthday: new Date()}); alert("姓名:" + student.name + "\r\n 性别:" + student.sex + "\r\n 生日:" + student.birthday); 从下面结果看出,属性 name 和 sex 均被覆盖,且添加了新成员 birthday。 姓名:李赞红 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 21 页 共 264 页 21 性别:男 生日:Fri May 01 2009 07:59:39 GMT+0800 Student = function(config){ this.name = "张海军"; this.sex = "男"; Ext.applyIf(this, config); } //测试 var student = new Student({name: "李赞红", sex: "男", birthday: new Date()}); alert("姓名:" + student.name + "\r\n 性别:" + student.sex + "\r\n 生日:" + student.birthday); 结果如下: 姓名:张海军 性别:男 生日:Fri May 01 2009 08:02:33 GMT+0800 哈,“张海军”终于没被“李赞红”替换了。 六、小结 讲了这么多,尽是些和 Ext 不沾边的事,是不是有点失望? 但是,我用人格担保我是个不啰嗦的人,了解我的学生肯定知道。这一章的内容是 Extjs 的基础,是我们能看懂源代码的保证。不然,看到 Jack 的代码,你以为自己进入了迷宫, 或者 Jack 故意要把我们打入冷宫。 虽然是基础,却是相对的,因为就是这寥寥几行代码,蕴含了丰富的设计哲学,细细体 会,才知其味。 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 22 页 共 264 页 22 第四章:消息框 一、话说消息框 大家对消息框并不陌生哈,消息框通常是一个模式窗口,会 屏蔽掉当前窗口所有的鼠标 键盘事件,关闭后才能继续后面的操作。消息框的类型也不一而足,有显示信息的,有提示 输入的,有确定用户行为的,IE 和 Firefox 默认的消息框很难看啊,死气沉沉,古板枯燥, 看多了令人生厌。 不过,好消息是 Ext 为我们带来了全新风格的消息框,那个舒服啊,啧啧啧…… Extjs 在实现消息框的时候,完全摈弃了传统的风格,不再弹出新的对话框,而是在当 前页面跳出一个层,并将原页面完整覆盖。 原来,只是一种模拟。 在 Ext 中,定义了一个类 MessageBox,该类还有一个更精简的名字 Msg,所有消息框 都定义在该类中。 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 23 页 共 264 页 23 二、最简单的消息框——提示框 最简单的?Extjs 有最简单的东西吗?没有。如果深入了解,发现每个细节都不简单, 但是,幸好大部分时候我们只是用用,解决项目中的实际问题,到底 Jack 如何做到的,让 喜欢玩的人玩去吧。 提示框的语法: Ext.MessageBox. alert ( String title, String msg, Function fn, Object scope ); 参数定义如下: 1、 title:标题 2、 msg:提示内容 3、 fn:提示框关闭后自动调用的回调函数 4、 scope:作用域,用于指定 this 指向哪里,一般不用管他,特殊情况下有用 其实,通常情况下,我们用得更多的是 title 和 msg 两个参数,举例如下①: extjsAlert = function(){ Ext.MessageBox.alert("提示框", "这是一个提示框"); } 也可以这样: extjsAlert = function(){ Ext.MessageBox.alert("提示框", "这是一个提示框", function(){ alert("提示框关闭了"); }); } 页面代码是这样的:,记住函 数名不要使用和 DOM 模型相同的名字,他们犯冲。 三、输入框 输入框用来提示输入字符串,相当于 window.prompt()方法。 语法: Ext.MessageBox.prompt(String title,String msg, Function fn, Object scope, Boolean/Number multiline ) 从定义中可以看到,前四个参数和提示框一样,最后多了一个参数,如果为 true 或为 数字,将允许输入多行或者指定默认高度(像素)。 示例如下②: extjsPrompt = function(){ Ext.MessageBox.prompt("输入框", "请输入您的姓名:", function(btn, txt){ Ext.MessageBox.alert("结果", "您点击了" + btn + "按钮,
输入的内容为" + txt); }); } 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 24 页 共 264 页 24 如果显示多行,看下面示例③: extjsPrompt = function(){ Ext.MessageBox.prompt("输入框", "请输入您的姓名:", function(btn, txt){ Ext.MessageBox.alert("结果", "您点击了" + btn + "按钮,
输入的内容为" + txt); }, this, 300); } 注意回调函数的参数,第一个为点击的按钮的名字,如果点击确定,为“ok”,如果点 击取消,为“cancel”,第二个参数就是用户输入的文本。 四、确认框 确认框提示用户作出选择,语法如下: Ext.MessageBox.confirm ( String title, String msg, Function fn, Object scope ) 参数同上,示例如下: extjsComfirm = function(){ Ext.MessageBox.confirm("确认", "请点击下面的按钮作出选择", function(btn){ Ext.MessageBox.alert("您单击的按钮是:" + btn); }); } 我们可以通过回调函数的参数 btn 采取相应的行动。 五、自定义消息框 如果上面所有的消息框都无法满足我们的需求,譬如没有图标、按钮类型太少,甚至更 BT 的,如果想要个进度条怎么办?哈哈,别急,Extjs 息数为你想到了。我们可以使用 show() 方法自定义消息框,只需要稍微配置一下就可以了。 show()方法的语法如下: Ext.MessageBox.show ( Object config ) 语法是不是显得更简单?不要小瞧了他,config 这个参数可谓包罗万象,使用 json 格式 可以传输很多信息到方法中去。 config 中常见属性如下: title:消息框标题栏 msg:消息内容 width:消息框的宽度 multiline:是否显示多行文本 closable:是否显示关闭按钮 buttons:按钮 icon:图标 fn:回调函数 举例说明: 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 25 页 共 264 页 25 extjsCustom = function(){ var config = { title: "自定义对话框", msg: "这是一个自定义对话框,想怎么搞就怎么搞", width: 400, multiline: true, closable: false, buttons: Ext.MessageBox.YESNOCANCEL, icon: Ext.MessageBox.QUESTION, fn: function(btn, txt){ Ext.MessageBox.alert("结果", "您点击了‘yes’按钮
,输入的值是:" + txt); } }; Ext.MessageBox.show(config); } 在上面的例子中,不熟悉的有 buttons 和 icon,这些选项在 Ext.MessageBox 中已有定义。 buttons(按钮)的取值如下: OK:只有“确定”按钮 CANCEL:只有“取消”按钮 OKCANCEL:有“确定”和“取消”按钮 YESNO:有“是”和“否”按钮 YESNOCANCEL:有“是”、“否”和“取消”按钮 icons(图标)取值如下: INFO:信息图标 WARNING:警告图标 QUESTION:询问图标 ERROR:错误图标 六、进度条对话框 进度条对话框可以说是一个创举,让一个富了现实意义和使用价值的进度条轻松实现, 随着进度条的滚动,我们的心情也随之畅快起来。代码赋予我们无穷的活力,让人们的视觉 再次受到最强烈的冲击。 进度条对话框也是一个自定义消息框,配置 config 时添时 progress=true 即可,同时还 可以设置其他相关信息,如进度提示等。Extjs 为我们提供的只是一个对话框而已,进度条 的滚动还得通过代码实现。下面是进度条的代码示范: extjsProgress = function(){ Ext.MessageBox.show({ title: '请等待', msg: '正在加载项目...', progressText: '正在初始化...', 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 26 页 共 264 页 26 width:300, progress:true, //此属性证明这是一个进度条 closable:false }); var f = function(v){ return function(){ if(v == 12){ Ext.MessageBox.hide(); Ext.MessageBox.alert('完成', '所有项目加载完成!'); }else{ var i = v/11; Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% 已 完 成'); } }; }; for(var i = 1; i < 13; i++){ setTimeout(f(i), i*500); } } 在上面的代码中,progressText 属性是进度条滚动之前最初的文本,滚动进程由 updateProgress(Number value, String progressText)方法来定义,参数 value 是从 0~1 之间的小 数,表示进度百分比;progressText 则表示进度条滚动过程中的文本提示信息,如 Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% 已完成');。 七、让消息框飞出来 很显然,这是一个动画效果。Extjs 允许我们将消息框从指定的位置飞出来,关闭时又 飞回去,很炫吧!实现也相当轻松,只要设置 animEl 选项即可,该选项指定一个标签,即 消息框从标签处飞出,关闭后又飞回标签。下面是演示代码: extjsAnimal = function(){ var config = { title: "飞出的消息框", msg: "这是一个自定义对话框,是飞出来的哦。", width: 400, multiline: true, closable: false, buttons: Ext.MessageBox.YESNOCANCEL, icon: Ext.MessageBox.QUESTION, animEl: "fly" }; 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 27 页 共 264 页 27 Ext.MessageBox.show(config); } animEl 的值为“fly”,这是按钮的 id 值,在 html 页面中这样定义:
。 八、小结 本节是 Extjs 最简单的内容,和浏览器传统的效果相比,效果更加炫丽动感。一个小小 的消息框,Extjs 如此注重细节,实在难能可贵。我们有理由相信,富客户端的蓝天,即将 徐徐展开。 以下是本章使用的 html 页面内容:





轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 28 页 共 264 页 28 第五章:页面与脚本完全分离 一、Extjs 是脚本的世界 编写良好的页面,往往将页面与脚本分离,而不是混杂在一起,这是一个好习惯,有利 于代码维护、重构和重用。Extjs 将 javascript 的作用发挥到极致,在界面设计过程中,我们 发现不再需要和 HTML 标记打交道,不再关注 div、table 和 span。如果您有 VB 或 Winform 的经验,更像这些可视化开发技术,只要以某种布局放置控件即可。所有的页面最终由 javascript 生成。 还是老调重弹,这需要一定的 javascript 基础。javascript 的确是一门神奇的语言,似乎 无法驾驭。但是,只要把握了 javascript 的灵魂,实现起来根本不是难事。 二、Ext.onReady 事件 上 一章中,我们曾看到这样一句话:,这样的代码好吗?好,但是不够好,因为 HTML 标记和函数还存 在一定依赖关系。我们有办法将二者彻底分离,这一切,得从 Ext.onReady 事件开始。 页面加载完成后,Ext.onReady 事件被触发,基本上,除了类封装,与页面相关的操作 都会写在该事件中。示范代码如下: Ext.onReady(function(){}); 该事件触发后,匿名函数被调用,我们的代码恰恰就是写在这个匿名函数中,这样,我 们便可以通过脚本为 HTML 标签绑定事件了。下面的示例您一定要看懂: 在 HTML 页面中,有下面的按钮,注意,该按钮没有定义任何的事件: 现在,我们在 js 文件中定义如下代码: Ext.onReady(function(){ Ext.get("btn").on("click", function(){ Ext.MessageBox.alert("点击", "我被点击了,非常高兴"); }); }); 运行该页面,点击“点击我”的按钮,您发现了什么?居然弹出了一个消息框。下面是 几点说明: 1、 Ext.get ( Mixed el):根据 HTML 标签的 id 属性获取 Ext.Element 对象,Ext.Element 是对 DOM 的封装,这个是比较常见的用法,另外参数也可以是 Ext.Element 对象或 者 DOM 节点对象。 2、 on(String eventName, Function fn):为 Ext.Element 对象定义一个事件,eventName 是事件名称,和传统的事件名称相比不以“on”开头,fn 为事件处理函数。从这里 可以延伸开去,也可以是“change”、“keypress”等。 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 29 页 共 264 页 29 3、 上面例子的意思是为 id=“btn”的按钮定义一个 click 事件,事件触发后弹出一个消 息对话框。 三、来自 Extjs 的问候 本节向您展示一个经典的问候示例,页面上有一个文本框,用于输入姓名,另外放置一 个按钮,单击按钮显示问候的消息框,如下图: 哈,确实是一个众所周知的例子,代码也同样简单: 5-2-2.html 5_2_2.js Ext.onReady(function(){ Ext.get("btn").on("click", function(){ var name = Ext.get("name").dom.value; Ext.Msg.alert("您好", "您好," + name + ",请接受来自 Extjs 的问候"); }); }) Ext.Element.dom:dom 属性是 Ext.Element 对象的 Dom 表示,获取 dom 之后,可以用 传统的方式进行访问。 四、让界面动起来 界面具有动画效果最后归结为元素的动画效果。Extjs 定义了若干个方法用于完成元素 动画的实现,一些是内置的,一些需要程序员自己编程。简单说,动态修改元素的样式是实 现动态效果最直接最常见的方法,所以,这其中并无奥妙可言,看清楚了事实的真相,只要 具备足够丰富的想象力,任何人都可以做出叹为观止的动画。 虽然动画效果应用于 Ext.Element 对象,却并不定义在 Ext.Element 类中,而是定义在另 一个类 Ext.Fx 中。这让我非常疑惑,仔细查看了 Ext.Element 的源代码,愣是没发现 Ext.Fx 的身影,最终,在 Ext.Fx 中看到了玄机,该类的最后一个语句告诉了我们事情的原委: Ext.apply(Ext.Element.prototype, Ext.Fx);,看看他的解释:Ext.Fx is automatically applied to Element so that all basic effects are available directly via the Element API(Ext.Fx 自动应用于 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 30 页 共 264 页 30 Element 对象,所有的基本效果直接通过 Element 调用)。 五、Ext.Fx 类 正如前面所说,Extjs 的动画大部分定义在 Ext.Fx 中,尽管如此,Ext.Element 类也定义 了部分动画函数。我们先来看看 Ext.Fx 类中的重要方法。 1、slideIn ( [String anchor], [Object options] ): 功能:滑入效果,作动画显示。 参数: anchor:推出的方向,定义了 8 种不同的方向,值不区别大小写,可选。 值 说明 tl 左上角 t 顶部中央 tr 右上角 l 左边中央 r 右边中央 bl 左下角 b 底部中央 br 右下角 options:选项配置,比较典型的是 duration 属性,用于定义动画持续的时间,可 选 。 以 下是默认配置: slideIn('t', { easing: 'easeOut', duration: .5 }); 示例:在 10 秒钟之内将 div 从右边中央滑入 5_5_1.html
slideIn
5_5_1.js Ext.onReady(function(){ Ext.get("a1").applyStyles({position: "absolute", top: 200, left: 200, backgroundColor: "red", width: 100, height: 100}).slideIn("r", {duration: 10}); }) applyStyles 是 Ext.Element 的方法,用于定义指定元素的样式。 2、slideOut ( [String anchor], [Object options] ):滑出效果,作动画隐藏。参数及用法同 上。以下是该方法的默认配置: slideOut('t', { easing: 'easeOut', duration: .5, 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 31 页 共 264 页 31 remove: false, useDisplay: false } ); 3、highlight ( [String color], [Object options] ):根据设置的颜色高亮显示 Element 对象, 然后渐隐为原始颜色。默认情况,高亮显示的背景颜色为黄色。 参数: color:起始颜色 options:选项配置 一个能应用在项目中的典型例子是: Ext.get("a2").applyStyles({ position: "absolute", top: 200, left: 300, backgroundColor: "red", width: 100, height: 100}).highlight("0000ff"/*起始颜色*/, { attr: 'background-color', /*我们改变的是背景颜色*/ duration: 2,/*动画持续时间*/ endColor: "ff0000" /*结束颜色*/ } ); 如果可以把 attr 属性值改成 color,我们发现颜色改变的不再是背景,而是文字颜色。 endColor 的颜色值不能是形如 red 之类的英文单词,只能是 16 进制表示。起始颜色为蓝色, 终止颜色为红色,中间的渐变由 Extjs 自动完成,非常自然。 4、frame ( [String color], [Number count], [Object options] ):展示一个展开的波纹,伴随 着渐隐的边框以突出显示 Element 对象。默认情况下展示的是一个淡蓝色的波纹。 参数: color:波纹颜色 count:波纹的个数 options:选项配置 示例:三个红色的波纹并持续 3 秒。 Ext.get("a3").applyStyles({ position: "absolute", top: 200, left: 400, backgroundColor: "red", width: 100, height: 100}).frame("ff0000", 3, { duration: 3 }); 5、fadeIn ( [Object options] ):将元素从透明渐变为不透明。结束时的透明度可以根据 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 32 页 共 264 页 32 "endOpacity"选项来指定。 示例: Ext.get("a4").applyStyles({ position: "absolute", top: 200, left: 500, backgroundColor: "red", width: 100, height: 100}).fadeIn({ endOpacity: 1, //可以是 0 到 1 之前的任意值(例如:.5) duration: 4 }); 6、fadeOut ( [Object options] ):将元素从不透明渐变为透明。结束时的透明度可以根据 "endOpacity"选项来指定。 示例: Ext.get("a5").applyStyles({ position: "absolute", top: 200, left: 600, backgroundColor: "red", width: 100, height: 100}).fadeOut({ endOpacity: 0, //可以是 0 到 1 之前的任意值(例如:.5) duration: 4, remove: false, useDisplay: false }); 7、scale ( Number width, Number height, [Object options] ):以动画展示元素从开始的高 度/宽度转换到结束的高度/宽度。 参数: width:结束宽度,如果为 undefined 则保持原始宽度 height:结束高度,如果为 undefined 为保持原始高度 示例: Ext.get("a6").applyStyles({ position: "absolute", top: 200, left: 700, backgroundColor: "red", width: 10, height: 10}).scale(100, 100, {duration: 2}); 8、shift ( Object options ):以动画展示元素任意组合属性的改变,如元素的尺寸、位置 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 33 页 共 264 页 33 坐标和(或)透明度。 如果以上属性中的任意一个没有在配置选项对象中指定则该属性不 会发生改变。 为了使该特效生效,则必须在配置选项对象中设置至少一个新的尺寸、位置 坐标或透明度属性。 下面是一个比较有实用性的示例: Ext.get("a7").applyStyles({ position: "absolute", top: 200, left: 800, backgroundColor: "red", width: 10, height: 10}).shift({ width: 100,/*动画终止之后的宽度*/ height: 100,/*动画终止之后的高度*/ x: 0,/*动画终止之后的 x 坐标*/ y: 0,/*动画终止之后的 y 坐标*/ opacity: .5,/*动画终止之后的透明度,0-1 之间的任意值*/ duration: 5/*动画持续的时间(5 秒)*/ }); 9、ghost ( [String anchor], [Object options] ):将元素从视图滑出并伴随着渐隐。作为可 选参数传入的定位锚点将被设置为滑出特效的结束点。 参数: anchor:同 slideIn 示例: Ext.get("a8").applyStyles({ position: "absolute", top: 200, left: 900, backgroundColor: "red", width: 100, height: 100}).ghost('b', { easing: 'easeOut', duration: .5, remove: false, useDisplay: false }); 上面一共有 8 个示例,我把这些示例全部定义在一个页面中,下面是 html 页面的源代 码,而脚本定义在 5_5_1.js 文件中。 5_5_1.html
slideIn
highlight
frame
fadeIn
轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 34 页 共 264 页 34
fadeOut
scale
shift
ghost
看看吧,这就是 Ext.Fx 给我们带来的绚丽效果,太强悍了,Extjs 做出了我们不敢做不 会做却很想做的事情,而且非常流畅自然。什么?记不住?别着急,查 API 文档吧,里面 有详细的解释和示例,你看着办好了。 六、Ext.Element 类中的动画函数 除了 Ext.Fx 类之外,Ext.Element 也提供了一些动画函数,而且功能并不弱。下面请听 我一一道来。 1、setWidth ( Number width, Boolean/Object animate):设置元素宽度 参数: width:新宽度; animate:是否以动画方式设置新的宽度,为 true 时有动画效果。也可以配置动画 参 数。 示例: Ext.onReady(function(){ Ext.get("e1").applyStyles({ position: "absolute", left: 300, top: 100, width: 200, height: 200, backgroundColor: "red" }).setWidth(500, true); }) 元素 e1 是一个 div元素(
setWidth
),初 始 宽 度 为 200px,通过 setWidth() 方法宽度设置为 500px,并且以动画方式将 div 拉宽。 2、setHeight ( Number height, Boolean/Object animate):设置高度,意义和使用同上。 3、setSize ( Number width, Number height, Boolean/Object animate):同时设置元素的宽度 和高度,并设置是否以动画显示。 参数: width:新的宽度 height:新的高度 animate:是否带有动画效果,或者配置动画参数 示例: Ext.get("e2").applyStyles({ 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 35 页 共 264 页 35 position: "absolute", left: 100, top: 100, width: 100, height: 100, backgroundColor: "red" }).setSize(500, 500, true); div 的初始大小为 100*100,通过 setSize()将大小变成 500*500,并以动画显示。 4、setBounds ( Number x, Number y, Number width, Number height, Boolean/Object animate):设置元素的位置和大小。 参数: x:新的左上角 x 坐标 y:新的左上角 y 坐标 width:新的宽度 height:新的高度 animate:是否以动画显示,或者配置动画参数 示例: Ext.get("e3").applyStyles({ position: "absolute", left: 100, top: 100, width: 100, height: 100, backgroundColor: "blue" }).setBounds(0, 0, 500, 500, true); 将 div 元素的位置从 100*100 变到 0*0,并将大小从 100*100 变化到 500*500。 5、show ( Boolean/Object animate):显示元素。 6、hide ( Boolean/Object animate):隐藏元素。 七、小结 随着经验的增长,我们会发现,使用 Extjs 来定义视图将彻底摆脱 HTML 标签,HTML 标签被严严实实藏匿起来,所有页面的显示都是基于 javascript 脚本。我不知道 Jack 团队这 样做,是好事还是坏事。 从我个人看来,这样做并不好,藏得越深,危害就越大,风险越难以估量。但是反过来 想一想,统一的效果、强大的浏览器兼容、优雅的语言、ajax 的完美支持……这些让我忘记 了一切,直至奋不顾身。 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 36 页 共 264 页 36 第六章:元素操作与模板 一、重要也不重要的东西 元素操作通常是指标签的创建、定位、删除和样式定义等。如果使用纯 javascript 而不 用任何框架,实现交互性强的页面就必须和元素操作打交道,Extjs 也同样提供了相关的功 能,但是,对于程序员来说,似乎并不那么重要了,Extjs 做了十分严密的封装。 模板是 Extjs 中一个非常重要的基础功能,因为需要生成大量的 HTML 标签,使用模板 绝对是不二的最佳选择,能带来非常棒的可读性。 但我并不打算花太多时间来讲模板,因为模板被 Extjs 自己用得更多,我们反而不太用。 这一章存在的目的是混个脸熟,在阅读源代码或者看别人例子的时候万一碰到不至于惊惶失 措。我在课堂上不一定会讲模板这个概念,这个文档可以作为您的补充。 到底重要还是不重要,实践出真知,答案其实在你心里。 二、Ext.DomHelper 类 Ext.DomHelper 类帮助我们使用 javascript 清晰地生成 HTML 代码,他的使用非常灵活, 我们应该找准他的主线,像庖丁解牛一样再慢慢剖开。 任何复杂的东西都有他存在的根基,根基就是精髓、是 重 心。过于浮躁搞不出什么深度, 也容易让人丧失自信,掌握一套适合自己的学习方法非常必要,在学习中不断沉淀,完善自 我——不仅仅是搞技术,其实任何事情都一样。只 要付 出 了 百 分之 一 百 的努力,就算没有成 功也不会后悔。 下面的方法对您可能有用—— 1、insertHtml ( String where, HTMLElement el, String html ):在指定的元素上插件 HTML 片段。 参数: where:插到哪里?可选值有:beforeBegin, afterBegin, beforeEnd, afterEnd el:参照元素 html:插件的内容 示例:在页面上定义如下 div:
这是一个层
Ext.DomHelper.insertHtml("afterBegin", Ext.get("e").dom, "
中 华 人 民 共和国
") 在页面上生成的结果如下:
中华人民共和国
轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 37 页 共 264 页 37 这是一个层
通过修改第一个参数的值,可以总结出四个可选值的含义: beforeBegin:插入起始标签之前 afterBegin:插入到起始标签之后,本示例就是这种情况 beforeEnd:插入到结束标签之前 afterEnd:插入到结束标签之后 2、下面的方法都差不多,我们通过一个示例来说明他们的用法。 insertBefore ( */ , Object/String o):新节点插入到指定节点之前; insertAfter ( */ , Object/String o):新节点插入到指定节点之后; insertFirst ( */ , Object/String o):新建节点并插入到指定节点作为第一个子节点; append(*/ , Object/String o):新建节点并插入到指定节点作为最后一个子节点; overwrite ( */ , Object/String o):替代指定节点内容; 参数: */:指定节点,类型可以为 String/HTMLElement/Element o:新节点,可以是 dom 对象(子孙)或裸 HTML 标记 示例: 6_6_1.html
第 1 个孩子
第 2 个孩子
第 3 个孩子
第 4 个孩子
第 5 个孩子
6_6_1.js //在 c2 之前插入 div Ext.DomHelper.insertBefore("c2", "
c2-child-2
"); //在 c2 之后插入 div Ext.DomHelper.insertAfter("c2", {tag: "div", html: "c2-child"}); //将一个新节点作为 parent 的第一个子节点 Ext.DomHelper.insertFirst("parent", "
parent-first-child
"); //将 c3 的内容更新 Ext.DomHelper.overwrite("c3", "There are new contents"); //将一个新节点作为 parent 的最后一个子节点 Ext.DomHelper.append("parent", {tag: "div", html: "parent-last-child"}); 结果:
parent-first-child
第 1 个孩子
c2-child-2
第 2 个孩子
c2-child
轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 38 页 共 264 页 38
There are new contents
第 4 个孩子
第 5 个孩子
parent-last-child
从例子中可以看出,新建的节点可以指定多种类型:即可以是一段 HTML 标记,也可 以是一个 json 对象,对于后者,可以通过 cls 属性来指定类选择器。 三、Ext.XTemplate Templete 是模板之意,就是定义一段 HTML 代码,并放置若干个{}作为占位符,运行 时将数据填充到{}中去。看来看去,和 java 中的 MessageFormat 很像。偷笑中…… XTemplate 和 DomHelper 有很深的渊源,DomHelper 是 XTemplate 的小弟,DomHelper 解决不了的事情,XTemplate 一定可以。 使用 XTemplate 一般会经历三个步骤: 1、定义 XTemplate 对象,指定一段 HTML 代码作为模板; 2、指定 XTemplate 中定义的 HTML 应该放置的位置,并填充占位符信息; 3、编译 XTemplate。 先看一个简单的例子来说明问题: Ext.onReady(function(){ var xt = new Ext.XTemplate( "", "", "", "", "", "", "
{2}{3}{4}
" ); xt.append("xt", [1, 300, '单元格 1', '单元格 2', '单元格 3']); xt.compile(); }) 页面如下:
实例化 XTemplate 时,可以配置任意个参数,会自动连接到一起,这种写法似乎更方便 更好读。append 方法同 DomHelper 的 append 方法,实际上还有 insertBefore、insertAfter、 insertFirst、overwrite 等方法,不同的是第二个参数,该参数是要填充到占位符中的数据, 可以是数组,也可以是 json 对象。执行完之后得到如下结果: 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 39 页 共 264 页 39
单元格 1 单元格 2 单元格 3
下面是改造后的例子,填充数据时用 json 对象代替了原来的数组: Ext.onReady(function(){ var xt = new Ext.XTemplate( "", "", "", "", "", "", "
{v1}{v2}{v3}
" ); xt.append("xt", {b: 1, w: 300, v1: "单元格 1", v2: "单元格 2", v3: "单元格 3"}); xt.compile(); }) 四、小结 这一章的内容实在太少,之所以这么说,是因为 XTemplete 的内容实在太多,我们没有 再深入,如果不是去扩展 Extjs,而只是单纯使用他的 API,这已经够了。 如果有兴趣,建议你去看看 API 文档,说得很详细,一定不会让你失望。 即使这样,在第七章,我会回过头来,对 XTemplete 作进一步的深入。 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 40 页 共 264 页 40 第七章:格式化 一、用户需要优秀体验的内容 这一章原本在我的计划之外,是我的疏忽,幸好还来得及。格式化太重要了,显示数据 时,我们将面对一大堆来自数据库的数据,这些数据往往只符合外国人的口味,对中国人来 说根本读不懂,日期就是一个典型的例子,还有货币、数字格式…… 做好本地化工作是程序员的一项基本任务,我们可以在服务器端先格式化数据,再传到 客户端显示,显然,这样加重了服务器的负担,消耗了宝贵的资源。更好的解决方案是,通 过 Extjs 提供的 Ext.util.Format 类,完全可以将格式化的工作交给客户端去实现。 用户需要的是体验优秀自然的内容,请时刻记住这一点。 二、Ext.util.Format 类 严格来说,Ext.util.Format 并不是一个类,只是一个对象。所以,调用他的方法时并不 需要先行实例化,直接调用即可,类似于 java 中的 static 方法。 如果打开他的源代码,基本结构是这样的: Ext.util.Format = function(){ var trimRe = /^\s+|\s+$/g; return { //方法定义在此区 }; }(); 我们看到,最后是以()结束的,实际上这已经是一个对象了。 Ext.util.Format 定义的方法涉及很多方面,使用起来并不难,对于稍微难理解的我写了 示例,妇孺皆知的内容直接跳过演示。 1、ellipsis ( String value, Number length ) : String 对大于指定长度部分的字符串,进行裁剪,增加省略号(“...”)的显示 参数项: value : String:要裁剪的字符串 length : Number:允许长度 返回: String 转换后的文本 示例: var v1 = "对大于指定长度部分的字符串,进行裁剪,增加省略号(“...”)的显示"; Ext.Msg.alert("ellipsis", Ext.util.Format.ellipsis(v1, 10)); 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 41 页 共 264 页 41 结果: 对大于指定长度... 2、undef ( Mixed value ) : Mixed 检查一个值是否为 underfined,若是的话转换为空值 参数项: value : Mixed:要检查的值 返回: Mixed 转换成功为空白字符串,否则为原来的值 示例: var v2 = "underfined"; Ext.Msg.alert("undef", Ext.util.Format.undef(v2)); 3、defaultValue ( Mixed value, String defaultValue ) : String 检查一个值(引用的)是否为空,若是则转换到缺省值。 参数项: value : Mixed:要检查的引用值 defaultValue : String:默认赋予的值(默认为"") 返回: String 示例: var v3; Ext.Msg.alert("defaultValue", Ext.util.Format.defaultValue(v3, "这是缺省值")); 4、htmlEncode ( String value ) : String 转义(&, <, >, and ') 为能在 HTML 中显示的字符 参数项: value : String:要编码的字符串 返回: String 编码后的文本 示例: var v4 = "株洲北大青鸟"; Ext.Msg.alert("htmlEncode", Ext.util.Format.htmlEncode(v4)); 和下面的代码比较一下就能理解该方法的作用: var v4 = "株洲北大青鸟"; Ext.Msg.alert("htmlEncode", v4); 5、htmlDecode ( String value ) : String 将(&, <, >, and ')字符从 HTML 显示的格式还原 参数项: value : String:解码的字符串 返回: String 编码后的文本 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 42 页 共 264 页 42 6、trim ( String value ) : String 裁剪一段文本的前后多余的空格 参数项: value : String:要裁剪的文本 返回: String 裁剪后的文本 关于这个方法,我实在不想再多说什么。 7、substr ( String value, Number start, Number length ) : String 返回一个从指定位置开始的指定长度的子字符串。 参数项: value : String:原始文本 start : Number:所需的子字符串的起始位置 length : Number:在返回的子字符串中应包括的字符个数。 返回: String 指定长度的子字符串 示例 var v5 = "中华人民共和国"; Ext.Msg.alert("substr", Ext.util.Format.substr(v5, 2, 2)); 求子串,这方法在任何语言中似乎都不曾漏掉。 8、lowercase ( String value ) : String 返回一个字符串,该字符串中的字母被转换为小写字母。 参数项: value : String:要转换的字符串 返回: String 转换后的字符串 示例: var v6 = "THE PEOPLE'S REPUBLIC OF CHINA"; Ext.Msg.alert("lowercase", Ext.util.Format.lowercase(v6)); 9、uppercase ( String value ) : String 返回一个字符串,该字符串中的字母被转换为大写字母。 参数项: value : String:要转换的字符串 返回: String 转换后的字符串 还需要我来举例吗? 10、capitalize ( String value ) : String 返回一个字符串,该字符串中的第一个字母转化为大写字母,剩余的为小写。 参数项: value : String:要转换的字符串 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 43 页 共 264 页 43 返回: String 转换后的字符串 11、date ( Mixed value, [String format] ) : Function 将某个值解析成为一个特定格式的日期。 参数项: value : Mixed:要格式化的值 format : String:(可选的)任何有效的日期字符串(默认为“月/日/年”) 返回: Function 日期格式函数 示例: var v7 = new Date();//获取当前日期 Ext.Msg.alert("date", Ext.util.Format.date(v7, "Y-m-d H:i:s")); 在格式化日期时,Y 表示年,m 表示月,d 表示日,H 表示 24 小时制的小时,h 表示 12 小时制的小时,i 表示分钟,s 表示秒。和 java 不太一样。 关于日期格式化的更多内容,请参考 Ext 帮助文档 Date 部分。 12、stripTags ( Mixed value ) : String 剥去所有 HTML 标签 参数项: value : Mixed:要剥去的文本 返回: String 剥去后的 HTML 标签 示例: var v8 = "株洲北大青鸟"; Ext.Msg.alert("stripTags ", Ext.util.Format.stripTags(v8)); 结果: 株洲北大青鸟 13、stripScripts ( Mixed value ) : String 剥去所有脚本(Script)标签 参数项: value : Mixed:要剥去的文本 返回: String 剥去后的 HTML 标签 14、fileSize ( Number/String size ) : String 对文件大小进行简单的格式化(xxx bytes、xxx KB、xxx MB) 参数项: size : Number/String:要格式化的数值 返回: String 已格式化的值 示例: 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 44 页 共 264 页 44 var v9 = 2349327423; Ext.Msg.alert("fileSize", Ext.util.Format.fileSize(v9)); 结果: 2240.5 MB Format 会根据字节的大小自动选择单位。 三、再谈 XTemplete XTemplate 用于定义一个模板,并将值提供给{}占位符,XTemplate 也能和 Ext.util.Format 配合,将填充的值进行格式化,得到用户想要的任何效果。 基本格式:{index|name:method(params)} 说明: index:索引 name:json 对象的属性名 method:Ext.util.Format 类的方法名 params:Ext.util.Format 类的方法参数 再花言巧语也需要一个例子来说明,为 了 迎 合 本 节 内容,我们对上一章的示例稍微做了 改造,填充的数据类型更加丰富: Ext.onReady(function(){ var xt = new Ext.XTemplate( "", "", '', "", "", "", "
{v1:date("Y 年 m 月 d 日 H 时 i 分 s 秒")}{v2:lowercase}{v3:ellipsis(5)}
" ); xt.append("xt", {b: 1, w: 300, v1: new Date(), v2: "CELL2", v3: "这是一段非常长的字 符串"}); xt.compile(); 从上面代码中看出,v1 为日期类型,按符合中国人口味的日期格式输出;v2 为大写字 母,变成小写字母后输出;v3 是一段较长的字符串,只显示一部分,剩余的用“…”来代 替。 另外,强调的一点是,输出日期时,如果使用"{v1:date('Y 年 m 月 d 日 H 时 i 分 s 秒')}"(即双引号在外,单引号在内)会产生错误。 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 45 页 共 264 页 45 四、如果连 Format 都不能满足 XTemplete 的需要呢? 这个问题问得很好,Format 不是万能的,他最多实现了常用的格式化功能,问题是, 不同的项目,不同的客户他们的需求千差万别,比如,在显示性别时,不是用文字说明,而 是用图片展示,这个要求已经超过了 Format 的极限,庆幸的是,Jack 替我们想到了——使 用函数来完成,实际上,我们使用的也是 Format 定义的方法。 来看下面的例子吧: var xt2 = new Ext.XTemplate( "您是性别是:{sex:this.sexRender}" ); xt2.sexRender = function(value){ return value == "男" ? "" : "" } xt2.append("xt2", {sex: "女"}); xt2.compile(); 显示性别时,调用 sexRender 方法,该方法的参数是实际填充的值,我们根据该参数返 回不同的图片。this.sexRender 中的 this 是指 xt2 对象,所以,sexRender 必须定义在 xt2 上, 否则,Extjs 会从 fm 对象中索取方法,fm 是 Extjs 自己定义的对象。 五、小结 Ext.util.Format 解决了项目开发中经常遇到的格式化问题,在后面章节的学习中,数据 格式化还会经常出现,我们已做好准备,迎接更大的挑战。 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 46 页 共 264 页 46 第八章:Extjs 组件结构 一、Extjs 的组件结构远比我们想象的复杂 使用 Ext 设计界面,完全颠覆了传统的 HTML 标签和样式,取而代之的是一个庞大的 组件体系,HTML 标签和样式被彻底隐藏,知道 VB 吗?知道 Winform 吗?对,更像这些 可视化编程技术,一切控件都是预先封装的,我们只需要配置属性、调用方法、触发事件。 现在,亟需解决的问题是立刻开发一个“所见即所得”的智能开发环境,目前,网上有了一 些,但不足以应用于项目中,功能太少,无法达到产品的要求。 而 Extjs 的组件结构比我们想象的更复杂,希望下面这张图没把你吓倒。 Extjs 组件之间存在着错综复杂的关系,但是,最核心的莫过于 Ext.util.Observable 类, 该类是一个抽象基类(Abstract base class),为事件机制的管理提供一个公共接口,是所有 组件的父类,这也是“观察者模式”的一种应用。 观察者模式的作用是被观察者一旦发生变化,会 通 知 观 察 者 作 出 相 应 的 反 应。这恰恰和 事件处理机制不谋而合。比如,按钮被单击,则触发单击事件;一行被选中,则选择事件被 触发;页面加载完成,触发 onReady 事件。可以看看 Ext.util.Observable 类的源代码,并理 清各种组件与该类的关系,一定会收获不小。 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 47 页 共 264 页 47 二、组件分类 大体来讲,组件有三种类型:基本组件、工具栏组件、表单组件。下面是各类型的组件 清单。 基本组件 xtype class 说明 box Ext.BoxComponent 具有边框属性的组件 button Ext.Button 按钮 colorpalette Ext.ColorPalette 调色板 component Ext.Component 组件 container Ext.Container 容器 cycle Ext.CycleButton 圆角按钮 dataview Ext.DataView 数据显示视图 datepicker Ext.DatePicker 日期选择面板 editor Ext.Editor 编辑器 editorgrid Ext.grid.EditorGridPanel 可编辑的表格 grid Ext.grid.GridPanel 不可编辑的表格 paging Ext.PagingToolbar 分页组件 panel Ext.Panel 面板 progress Ext.ProgressBar 进度条 splitbutton Ext.SplitButton 可分裂的按钮 tabpanel Ext.TabPanel 选项面板 treepanel Ext.tree.TreePanel 树 viewport Ext.ViewPort 视图 window Ext.Window 窗口 工具栏组件 xtype class 说明 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 48 页 共 264 页 48 toolbar Ext.Toolbar 工具栏 tbbutton Ext.Toolbar.Button 按钮 tbfill Ext.Toolbar.Fill 文件 tbitem Ext.Toolbar.Item 工具条项目 tbseparator Ext.Toolbar.Separator 工具栏分隔符 tbspacer Ext.Toolbar.Spacer 工具栏空白 tbsplit Ext.Toolbar.SplitButton 工具栏分隔按钮 tbtext Ext.Toolbar.TextItem 工具栏文本项 表单组件 xtype class 说明 form Ext.FormPanel Form 面板 checkbox Ext.form.Checkbox 复选框 combo Ext.form.ComboBox 下拉列表框 datefield Ext.form.DateField 日期选择器 field Ext.form.Field 表单字段 fieldset Ext.form.FieldSet 字段分组 hidden Ext.form.Hidden 隐藏表单域 htmleditor Ext.form.HtmlEditor 在线 HTML 编辑器 numberfield Ext.form.NumberField 数字编辑器 radio Ext.form.Radio 单选按钮 textarea Ext.form.TextArea 区域文本框 三、组件的生命周期 通常情况下,组件架构已经够用了。它的设计目标是组件的大部分管理都对最终开发者 透明。不管怎样,当我们需要定制或者扩展组件的时候,了解组件的生命周期会变得非常有 用。下面的每一个阶段都是从 Component 继承下来的类的生命周期中重要的阶段。 第一个阶段:初始化 1、应用配置选项 从 Component 继承下来的类并不需要提供(通常没有提供)一个独立的构造器。 Component 的构造器不仅应用从子类传过来的配置选项,同时它还做了以下的工作。 2、创建事件 任何组件都有 enabled、disable、beforeshow、show、beforehide、hide、bdforerender、render、 beforedesctory、destory 事件,这些事件可以被任何组件调用。 3、在 ComponentMgr 中注册组件实例 这样就可以通过 Ext.getCmp 被获得实例引用。 4、调用 initComponent 方法 这是一个最重要的初始化步骤,它是做为一个模板方法,子 类 可 以 按需要重写这个方法。 被创建的类的 initComponent 首先被调用,然后通过组件提供的 superclass.initComponent 向 上调用。这个方法非常容易被实现,如果需要,你还可以任意覆盖构造器逻辑。 5、状态被始化 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 49 页 共 264 页 49 如果组件有状态,已保存的状态会被重新加载。 6、加载插件 如果组件有指定插件,则插件会在这时候被初始化。 7、组件呈现 如果有配置 renderTo 或 applyTo,组件会马上被呈现输出,否则,它会被延迟输出,直 到组件被显式调用显示,或被它的容器所调用输出。 第二阶段:呈现 1、触发 beforerender 事件 这是一个可取消的事件,如果需要给提供处理函数来阻止组件的继续呈现输出。 2、设置容器 如果没有父容器被指定,默认它的父对象被指定为它的容器。 3、调用 onRender 方法 这是为子类执行呈现工作的一个非常重要的方法,这是一个模板方法,在子类中可以根 据需来重写它的实现逻辑。直接被创建的类的 onRender 首先被调用,然后它可以通过 superclass.onRender 来调用基类的 onRender 方法。这个方法很容易被重新实现,如果需要你 可以在继承关系的任意类中重写这个方法。 4、不隐藏组件 默认,大多数组件都会通过设置像 x-hidden 这个样式来使它隐藏。当 autoShow 设置为 true 时,这个隐藏功能的样式会被移除。 5、应用自定义样式 所有的 Component 子类都支持指定 cls 配置属性,通过它可以为 Component 所呈现的 HTML 元素指定 CSS 样式。通过添加组件的 cls 属性,使用标准的样式规则,是一个自定义 可视组件显示效果的非常完美的方法。 6、render 方法被触发 简单的通知组件已经被成功的呈现了。 7、调用 afterRender 这是另一个模板方法,子 类 根 据 逻 辑 需要可以重新实现或覆盖该方法。所有的子类可以 通过调 superclass.afterRender.来调用父类的方法。 8、组件隐藏或不可用 根据配置选项的值来设置。 9、状态事件被初始化 可以状态化的组件会定义一些事件来指定状态的初始化和保存。如果提供,这些事件会 被添加。 第三阶段:销毁 1、触发 beforedestroy 事件 这是一个可取消的事件,如果需要,可能通过提供事件代理来阻止组件被销毁。 2、调用 beforeDestroy 方法 又一个模板方法,在子类中可以重新实现和调用父类的方法。 3、移除事件监听者(代理) 如果组件已被呈现,则移除它底层的 HTML 元素的事件监听列表,然后将元素从 DOM 中移除。 4、onDestroy 被调用 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 50 页 共 264 页 50 这个还是一个模板方法,在子类可以重新实现。这里需要注意的是,容器类提供了一个 默认的 onDestroy 实现,它会循环销毁它的成员组件。 5、组件实例从 ComponentMgr 中反注册 不可以再通过 Ext.getCmp 获取到对象实例。 6、destroy 事件被触发 这只是一个简单的提醒,表示组件销毁成功。 7、移除 Component 上的事件代理 组件可以独立于元素,自己拥有事件代理,如果存在则移除它们。 本节是老外写的,被翻译成中文,怎么看怎么别扭。 四、组件渲染方法 render 在类 Ext.Component 中,定义了一个名为 render 的方法,该方法能将组件的最终效果在 页面上呈现出来。通过对该方法源代码的分析,我们可以大概知道 Extjs 在渲染组件时的过 程。 render : function(container, position){ //如果还没有被渲染 并且 beforerender 方法返回值为 true,则进行渲染,这 样,确保了对于组件仅进行一次渲染; position 参数指定了组件被插入容器的位 置(即在 position 指定的元素前插入组件) if(!this.rendered && this.fireEvent("beforerender", this) !== false){ //没有传入任何参数(即未指定容器 container)并且设置了 this.el, 增设配置 this.container 属性 if(!container && this.el){ this.el = Ext.get(this.el); //将父节点作为自己的容器 container = this.el.dom.parentNode; this.allowDomMove = false; } this.container = Ext.get(container); // 如果配置了 ctCls, 对 container 进行 ctCls 的渲 染,ctCls(Container Class)是容器的渲染类名,cls(Class)是元素的渲染类 名 if(this.ctCls){ this.container.addClass(this.ctCls); } this.rendered = true; //设置 position if(position !== undefined){ if(typeof position == 'number'){ position = this.container.dom.childNodes[position]; 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 51 页 共 264 页 51 }else{ position = Ext.getDom(position); } } this.onRender(this.container, position || null); //如果设置了 autoShow,则移除 x-hidden 和 x-hide-hideMode(根据 hideMode 该属性可以配置为 display,visibility,offsets 三种属性),从这 个方法可以看出,一搬来说,组件创建后缺省的模式为 hidden 或者 none if(this.autoShow){ this.el.removeClass(['x-hidden','x-hide-' + this.hideMode]); } //如果设置了 cls,则对元素进行渲染 if(this.cls){ this.el.addClass(this.cls); delete this.cls; } //如果设置了 style,则对元素 Style 属性进行设置 if(this.style){ this.el.applyStyles(this.style); delete this.style; } //触发 fireEvent 和 AfterRender 事件 this.fireEvent("render", this); this.afterRender(this.container); //如果设置了 hidden 和 disabled 则进行相应的处理 if(this.hidden){ this.hide(); } if(this.disabled){ this.disable(); } if(this.stateful !== false){ this.initStateEvents(); } } return this; } 以下是 onReader()方法的源代码: onRender : function(ct, position){ //如果配置了 autoEl 属性,则根据 autoEl 属性生成 el 属性, 如果 autoEl 属性为字符串,则根据字符串生成元素;否则,则在 autoEl 指定的元素外包裹一层 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 52 页 共 264 页 52 div 元素 if(this.autoEl){ if(typeof this.autoEl == 'string'){ this.el = document.createElement(this.autoEl); }else{ var div = document.createElement('div'); Ext.DomHelper.overwrite(div, this.autoEl); this.el = div.firstChild; } if (!this.el.id) { this.el.id = this.getId(); } } //把 position 元素插入到 el 元素前 if(this.el){ this.el = Ext.get(this.el); if(this.allowDomMove !== false){ ct.dom.insertBefore(this.el.dom, position); } if(this.overCls) { this.el.addClassOnOver(this.overCls); } } } 五、小结 本章介绍了 Extjs 组件的结构以及各组件的生命周期,并重点分析了组件的渲染方法 render(),不得不承认,这部分内容有点复杂,而且非常抽象,不过没关系,可以先跳过本 章节,获取更多的感性和理性认识后,回过头来,会发现更多意想不到的惊喜。 了解组件的生命周期,有利于把握所有组件的共性,为编程提供更强的灵活性。 认真的男人是最帅的,认真的女人是最漂亮的。我真的不认为你的长相和你的衣着能决 定你的内含和气质。让我们做一个认真的人。 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 53 页 共 264 页 53 第九章:按钮与日期选择器 一、开始组件学习之旅 哈哈,你一定很开心。 前面听我讲了这么多,可是突然发现什么也做不了,一定失望透顶。如果真是这样,你 一定是个急性子。这样可不行。“万丈高楼平地起”,“冰冻三尺,非一日之寒”,踩在云朵上, 迟早会重重地掉到地上。诚然,我们先前看到的全是基础,但是,请 记住,基础永远最重要, 评价一个人是否是牛人,不在于他知道多少框架,而在于他的基础有多牢固。 根扎得越深,站得就越稳。 现在,我要开始讲组件了,把项目中所有要用到的组件全部讲得通通透透。我无法预知 你的智商,但我相信我自己。只要我会,就一定能讲清楚。因此,你没有理由不开心,不是 吗? 你最好还是做点心理准备,Extjs 的控件多而杂,虽然有十足的信心,我还真怕把我自 己讲糊涂。我会尽可能用简单的语言来描述复杂的逻辑,但是,同样会用复杂的代码来解释 简单的概念。人生就是这样,十年一个轮回,由不得自己去控制。 二、被设计得面目全非的按钮 我敢保证,你看了按钮生成的源代码后,一定会大跌眼镜。 轻松搞定 Extjs 李赞红(lifenote@21cn.com) 株洲北大青鸟 第 54 页 共 264 页 54
这是一个最简单的按钮,却被层层封装,最后,才看到最关键的语句

下载文档,方便阅读与编辑

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 20 金币 [ 分享文档获得金币 ] 10 人已下载

下载文档

相关文档