[小学教育]ext 教程.doc

TOC \o 1-4 \h \u   序 言 　 ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力。ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。 最近我们在几个应用都使用到了ExtJS，对公司以前开发的一个OA系统也正在使用ExtJS2.0进行改造，使得整个系统在用户体验上有了非常大的变化。本教程记录了前段时间本人学习ExtJS的一些心得及小结，希望能帮助正在学习或准备学习ExtJS的朋友们快速走进ExtJS2.0的精彩世界。 教程包括ExtJS的新手入门、组件体系结构及使用、ExtJS中各控件的使用方法及示例应用等，是一个非常适合新手的ExtJS入门教程。本教程主要是针对ExtJS2.0进行介绍，全部代码、截图等都是基于ExtJS2.0。 在学习了本教程后，可以下载这个基于ExtJS2.0开发的单用户Blog系统的源代码，这个系统是我们团队中的williamraym与大峡等人开发的一个演示系统，系统源码整体质量比较高，通过学习这套源代码相邻一定能提高您ExtJS的综合水平。 本教程比较适合ExtJS的新手作为入门教程及手册使用，并在我的博客 /blog/lengyu/上进行发布；应一些朋友的要求，根据本教程的写作思路，我还编写了比本教程更为详细的《ExtJS实用开发指南》，包含详细的ExtJS框架使用方法、各个控件详细配置参数、属性、方法及事件介绍，与服务器端集成及一个完整的示例应用系统介绍等内容，适合想深入学习ExtJS或正在使用ExtJS进行开发朋友们使用。该《指南》当前在作为VIP文档发布，供该站的VIP用户阅读及下载。凡是购买了《ExtJS实用开发指南》文档的VIP用户，都可以在该指南印刷版出版后均会免费得到相应的印刷版本。 最后，希望广大网友把阅读本教程中的发现的错误、不足及建议等反馈给我们，让我们一起共同学习、共同进步，下面让我们一起进入精彩的ExtJS世界吧。 第一章、ExtJS简介 ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。ExtJS可以用来开发RIA也即富客户端的AJAX应用，下面是一些使用ExtJS开发的应用程序截图： (wlr的blog应用) (ExtJS的表格控件) (不同主题的ExtJS弹出框效果) 　　ExtJS是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。 　　ExtJs最开始基于YUI技术，由开发人员Jack Slocum开发，通过参考Java Swing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。 第二章、开始ExtJS 2.1获得 ExtJS 要使用ExtJS，那么首先要得到ExtJS库文件，该框架是一个开源的，可以直接从官方网站下载，网址 HYPERLINK /download /download，进入下载页面可以看到大致如图xxx所示的内容，可以选择选择1.1或2.0版本，本教程使用的2.0版本。 图1-1 ExtJs不同版本下载选择页面 　　单击上图中的【Download ext-2.0.zip】超链接进行下载，把下载得到的ZIP压缩文件解压缩到【D:\ExtCode】目录下，可以得到如如图1-2所示的内容。 图1-2 ExtJS发布包目录 　　adapter：负责将里面提供第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库。 　　build： 压缩后的ext全部源码(里面分类存放)。 　　docs： API帮助文档。 　　exmaples：提供使用ExtJs技术做出的小实例。 　　resources：Ext UI资源文件目录，如CSS、图片文件都存放在这里面。 　　source： 无压缩Ext全部的源码(里面分类存放) 遵从Lesser GNU （LGPL） 开源的协议。 　　Ext-all.js：压缩后的Ext全部源码。 　　ext-all-debug.js：无压缩的Ext全部的源码(用于调试)。 　　ext-core.js：压缩后的Ext的核心组件，包括sources/core下的所有类。 　　ext-core-debug.js：无压缩Ext的核心组件，包括sources/core下的所有类。 2.2、应用ExtJS 应用extjs需要在页