实用开发指南ExtJS

ExtJS实用简明教程[收集整理:龚辟愚、QQ群：19274175]-1-序言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。在学习了本教程后，可以下载wlr.easyjf.com这个基于ExtJS2.0开发的单用户Blog系统的源代码，这个系统是我们团队中的williamraym与大峡等人开发的一个演示系统，系统源码整体质量比较高，通过学习这套源代码相邻一定能提高您ExtJS的综合水平。本教程比较适合ExtJS的新手作为入门教程及手册使用，并在我的博客上进行发布；应一些朋友的要求，根据本教程的写作思路，我还编写了比本教程更为详细的《ExtJS实用开发指南》，包含详细的ExtJS框架使用方法、各个控件详细配置参数、属性、方法及事件介绍，与服务器端集成及一个完整的示例应用系统介绍等内容，适合想深入学习ExtJS或正在使用ExtJS进行开发朋友们使用。该《指南》当前在wlr.easyjf.com作为VIP文档发布，供该站的VIP用户阅读及下载。凡是购买了《ExtJS实用开发指南》文档的VIP用户，都可以在该指南印刷版出版后均会免费得到相应的印刷版本。最后，希望广大网友把阅读本教程中的发现的错误、不足及建议等反馈给我们，让我们一起共同学习、共同进步，下面让我们一起进入精彩的ExtJS世界吧。ExtJS实用简明教程[收集整理:龚辟愚、QQ群：19274175]-2-第一章、ExtJSExtJSExtJSExtJS简介ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。ExtJS可以用来开发RIA也即富客户端的AJAX应用，下面是一些使用ExtJS开发的应用程序截图：(wlr的blog应用)ExtJS实用简明教程[收集整理:龚辟愚、QQ群：19274175]-3-(ExtJS的表格控件)(不同主题的ExtJS弹出框效果)ExtJS是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。ExtJS实用简明教程[收集整理:龚辟愚、QQ群：19274175]-4-第二章、开始ExtJSExtJSExtJSExtJS2.12.12.12.1获得ExtJSExtJSExtJSExtJS要使用ExtJS，那么首先要得到ExtJS库文件，该框架是一个开源的，可以直接从官方网站下载，网址，进入下载页面可以看到大致如图xxx所示的内容，可以选择选择1.1或2.0版本，本教程使用的2.0版本。图1-1ExtJs不同版本下载选择页面单击上图中的【Downloadext-2.0.zip】超链接进行下载，把下载得到的ZIP压缩文件解压缩到【D:\ExtCode】目录下，可以得到如如图1-2所示的内容。图1-2ExtJS发布包目录adapter：负责将里面提供第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库。build：压缩后的ext全部源码(里面分类存放)。docs：API帮助文档。exmaples：提供使用ExtJs技术做出的小实例。resources：ExtUI资源文件目录，如CSS、图片文件都存放在这里面。source：无压缩Ext全部的源码(里面分类存放)遵从LesserGNU（LGPL）开源的协议。ExtJS实用简明教程[收集整理:龚辟愚、QQ群：19274175]-5-Ext-all.js：压缩后的Ext全部源码。ext-all-debug.js：无压缩的Ext全部的源码(用于调试)。ext-core.js：压缩后的Ext的核心组件，包括sources/core下的所有类。ext-core-debug.js：无压缩Ext的核心组件，包括sources/core下的所有类。2.22.22.22.2、应用ExtJSExtJSExtJSExtJS应用extjs需要在页面中引入extjs的样式及extjs库文件，样式文件为resources/css/ext-all.css，extjs的js库文件主要包含两个，adapter/ext/ext-base.js及ext-all.js，其中ext-base.js表示框架基础库，ext-all.js是extjs的核心库。adapter表示适配器，也就是说可以有多种适配器，因此，可以把adapter/ext/ext-base.js换成adapter/jquery/ext-jquery-adapter.js，或adapter/prototype/ext-prototype-adapter.js等。因此，要使用ExtJS框架的页面中一般包括下面几句：在ExtJS库文件及页面内容加载完后，ExtJS会执行Ext.onReady中指定的函数，因此可以用，一般情况下每一个用户的ExtJS应用都是从Ext.onReady开始的，使用ExtJS应用程序的代码大致如下：fn也可以写成一个匿名函数的形式，因此上面的代码可以改成下面的形式：scripttype=text/javascriptsrc=extjs/adapter/ext/ext-base.js/scriptscripttype=text/javascriptsrc=extjs/ext-all.js/scriptscriptfunctionfn(){alert(‘ExtJS库已加’);}Ext.onReady(fn);/scriptscriptfunctionfn(){alert(‘ExtJS库已加载!’);}Ext.onReady(function(){alert(‘ExtJS库已加载!’);});ExtJS实用简明教程[收集整理:龚辟愚、QQ群：19274175]-6-2.32.32.32.3、ExtJSExtJSExtJSExtJS版的HelloWorldHelloWorldHelloWorldHelloWorld下面我们写一个最简单的ExtJS应用，在hello.html文件中输入下面的代码：图1-11hello.html页面效果进一步，我们可以在页面上显示一个窗口，代码如下：/scriptheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/titleExtJS/titlelinkrel=stylesheettype=text/csshref=extjs/resources/css/ext-all.css/scripttype=text/javascriptsrc=extjs/adapter/ext/ext-base.js/scriptscripttype=text/javascriptsrc=extjs/ext-all.js/scriptscriptExt.onReady(function(){Ext.MessageBox.alert(hello,Hello,easyjfopensource);});/script/headbody/body/htmlExtJS实用简明教程[收集整理:龚辟愚、QQ群：19274175]-7-在浏览hello.html，即可得在屏幕上显示一个窗口，如图xxx所示。第三章ExtExtExtExt框架基础及核心简介3.13.13.13.1、ExtExtExtExt类库简介ExtJS由一系列的类库组成，一旦页面成功加载了ExtJS库后，我们就可以在页面中通过javascript调用ExtJS的类及控件来实现需要的功能。ExtJS的类库由以下几部分组成：scriptExt.onReady(function(){varwin=newExt.Window({title:hello,width:300,height:200,html:'h1Hello,easyjfopensource/h1'});win.show();});/scriptExtJS实用简明教程[收集整理:龚辟愚、QQ群：19274175]-8-底层API(core)：底层API中提供了对DOM操作、查询的封装、事件处理、DOM查询器等基础的功能。其它控件都是建立在这些底层api的基础上，底层api位于源代码目录的core子目录中，包括DomHelper.js、Element.js等文件，如图xx所示。控件(widgets)：控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。控件位于源代码目录的widgets子目录中，包含如图xx所示。ExtJS实用简明教程[收集整理:龚辟愚、QQ群：19274175]-9-实用工具Utils：Ext提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax请求、Cookie管理、CSS管理等扩展等功能，如图所示：3.23.23.23.2、ExtExtExtExt的组件Ext2.0对框架进行了非常大的重构，其中最重要的就是形成了一个结构及层次分明的组件体系，由这些组件形成了Ext的控件，Ext组件是由Component类定义，每一种组件都有一个指定的xtype属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。ExtJS中的组件体系由下图所示：ExtJS实用简明教程[收集整理:龚辟愚、QQ群：19274175]-10-组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。基本组件有：xtypeClassboxExt.BoxComponent具有边框属性的组件ButtonExt.Button按钮colorpaletteExt.ColorPalette调色板componentExt.Component组件containerExt.Container容器cycleExt.CycleButtondataviewExt.DataView数据显示视图datepickerExt.DatePicker日期选择面板editorExt.Editor编辑器editorgridExt.grid.EditorGridPanel可编辑的表格ExtJS实用简明教程[收集整理:龚辟愚、QQ群：19274175]-11-3.33.33.33.3、组件的使用组件可以直接通过new关键子来创建，比如控件一个窗口，使用newExt.Window()，创建一个表格则使用newExt.GridPanel()。当然，除了一些普通的组件