Ext+JS深入浅出

前言EXTJS通常简称为EXT，它是一个非常优秀的Ajax框架，可以用来开发具有炫丽外观的富客户端应用。它是一个用JavaScript编写的与后台技术无关的Ajax框架。EXT绚丽多彩的界面吸引了许多程序员的眼球，同时也吸引了众多客户，它似乎一夜之间就迅速流行开来。对于企业应用系统，尤其是MIS类型的系统而言，EXT非常适用。当我们第一次使用EXT时，就被它深深地吸引住了。对于像我们这样的没有美术功底的程序员来说，EXT为我们解决了一大难题，因为它天生拥有炫丽的外表。同时，有很多用其他技术无法实现或极难实现的功能，却能用EXT轻易实现，比如EXT中的表格、树形、布局等控件能为我们的日常开发工作节约大量的时间和精力，这些都坚定了我们使用EXT的决心。我们在学习EXT的过程中做了大量笔记，记下了学习过程中的一些心得和体会，同时也写了很多示例程序，但是从未想过会将这些资料付诸出版。EXT的参考资料很缺乏，我们发现身边很多学习EXT的朋友都在黑暗中摸索，尤其是英文不太好的朋友，学习起来非常吃力。EXT的中文资料就更少了，虽然有人把EXT官方的API文档中文化了，但是API文档中只有一些基础理论和简单示例，并不能指导我们快速地去实践。我们是实用主义者，本书的最大特点就是以实例为基础，在实例的基础上讲解EXT的各种用法。这样既便于读者理解，也方便让读者亲自实践，从而迅速地将所学到的知识运用到实际项目中去。本书适合有一定CSS和HTML基础的开发者阅读，它的主要目的是让开发者能快速学会EXT，并立即付诸实践。本书中的示例代码都是以EXT2.2为基础的，也包含了即将发布的EXT3.0中的新特性，对EXT的相关知识进行了深入而全面的阐述。EXT发布包中有一个examples目录，是专门用来放置各种演示示例的，本书附带的所有示例①也可以直接放在这个目录下使用。使用时，请将对应目录放在EXT发布包的examples目录下，可以用浏览器打开示例HTML文件观看效果（见图0-1）。示例中使用了localXHR.js，无需服务器就可以读取JSON数据，从而可以直接在本地浏览大部分示例。对于那些需要后台JSP提供数据的示例，最简单的方法是将整个EXT发布包复制到Tomcat的①这些示例可以从图灵公司网站上与本书对应的页面下载。——编者注图0-1examples目录展开图2前言webapps目录下，启动Tomcat后，可通过浏览器访问examples下的示例。出于对EXT的喜爱，又承蒙广大爱好EXT的朋友的错爱，我们写作了本书。如果有不恰当之处，敬请批评指正。为了便于与读者朋友交流，我们特为本书在我们的网站上开辟了专门的页面①。欢迎大家把对本书的意见和建议发到这个页面上来，我们会积极参与讨论，在此深表感谢。最后，我们要感谢所有在本书的写作期间给予我们帮助和鼓励的朋友们，还有那些志同道合的EXT爱好者们。徐会生何启伟康爱媛2008年10月20日①目录第1章EXT概述.........................................................11.1下载EXT发布包...........................................11.2如何查看EXT自带的API和示例.................11.3为什么有些示例必须放在服务器上才能看到效果..............................................21.4HelloWorld..................................................21.4.1直接使用下载的发布包..................21.4.2在项目中使用EXT...........................31.5为什么页面提示“找不到图片”...............31.6辅助开发......................................................41.6.1调试工具Firebug..............................41.6.2开发利器Spket.................................71.7本章小结....................................................10第2章EXT框架基础..............................................112.1EXT的事件和类.........................................112.1.1自定义事件....................................112.1.2浏览器事件....................................132.1.3Ext.lib.Event..........................132.1.4Ext.util.Observable.........................142.1.5Ext.EventManager...................172.1.6Ext.EventObject......................192.2EXT的核心组件.........................................202.2.1Ext.Component..........................202.2.2Ext.BoxComponent...................222.2.3Ext.Container..........................232.2.4Ext.Panel...................................242.2.5Ext.TabPanel.............................242.3本章小结....................................................27第3章表格控件........................................................283.1Grid的特性简介.........................................283.2制作一个简单的Grid.................................293.3Grid常用功能详解.....................................323.3.1部分属性功能................................323.3.2自主决定每列的宽度....................333.3.3让Grid支持按列排序.....................353.3.4解决中文排序................................353.3.5显示日期类型数据........................373.4在单元格里显示红色的字、图片和按钮.....383.5给Grid的行和列设置颜色.........................413.6自动显示行号和复选框.............................423.6.1自动显示行号................................433.6.2复选框............................................443.7选择模型....................................................453.8表格视图——Ext.grid.GridView......463.9表格分页....................................................473.9.1为Grid添加分页工具条.................483.9.2通过后台脚本获得分页数据.........493.9.3分页工具栏显示在Grid的顶部.....513.9.4让EXT支持前台排序.....................523.10后台排序..................................................533.11可编辑表格控件——EditorGrid.............553.11.1制作一个简单的EditorGrid.........553.11.2添加一行数据..............................563.11.3保存修改结果..............................583.11.4验证EditGrid中的数据................593.11.5限制输入数据的类型..................603.12属性表格控件——PropertyGrid..............633.12.1PropertyGrid.................................643.12.2只能看不能动的PropertyGrid.....653.12.3强制对name列排序.....................653.12.4根据name获得value..................663.12.5自定义编辑器..............................663.13分组表格控件——group.........................663.13.1分组表格简介..............................673.13.2分组表格视图Ext.grid.GroupingView......683.14可拖放的表格..........................................692目录3.14.1拖放改变表格的大小...................693.14.2在同一个表格里拖放...................703.14.3表格之间的拖放...........................723.14.4表格与树之间的拖放...................733.15Grid与右键菜单........................................733.16本章小结...................................................74第4章表单与输入控件..........................................764.1制作一个表单.............................................764.2FormPanel和BasicForm详解................774.3EXT支持的控件.........................................774.3.1控件继承图.....................................774.3.2表单控件.........................................784.3.3基本输入控件Ext.form.Field........................784.3.4文本输入控件Ext.form.TextField...............794.3.5多行文本输入控件Ext.form.TextArea...............