《EXT_JS详解(0积分下载)》由会员分享，可在线阅读，更多相关《EXT_JS详解(0积分下载)（53页珍藏版）》请在金锄头文库上搜索。
1、ExtJS 实用简明教程ExtJS 实用简明教程ExtJS 实用简明教程ExtJS 实用简明教程ExtJS 实用简明教程ExtJS 实用简明教程- 1 -序言ExtJS 是一个很不错的Ajax 框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s 应用更加具有活力及生命力。ExtJS 是一个用javascript 编写，与后台技术无关的前端ajax 框架。因此，可以把ExtJS 用在.Net、Java、Php 等各种开发语言开发的应用中。最近我们在几个应用都使用到了ExtJS，对公司以前开发的一个OA 系统也正在使用ExtJS2.0进行改造，使得整个系统在用户体验上有了非常大的变化。
2、本教程记录了前段时间本人学习ExtJS 的一些心得及小结，希望能帮助正在学习或准备学习ExtJS 的朋友们快速走进ExtJS2.0的精彩世界。教程包括ExtJS 的新手入门、组件体系结构及使用、ExtJS 中各控件的使用方法及示例应用等，是一个非常适合新手的ExtJS 入门教程。本教程主要是针对ExtJS2.0 进行介绍，全部代码、截图等都是基于ExtJS2.0。在学习了本教程后，可以下载 这个基于ExtJS2.0 开发的单用户Blog 系统的源代码，这个系统是我们团队中的williamraym 与大峡等人开发的一个演示系统，系统源码整体质量比较高，通过学习这套源代码相邻一定能提高您ExtJS
3、 的综合水平。本教程比较适合ExtJS 的新手作为入门教程及手册使用， 并在我的博客http:/ 实用开发指南，包含详细的ExtJS 框架使用方法、各个控件详细配置参数、属性、方法及事件介绍，与服务器端集成及一个完整的示例应用系统介绍等内容，适合想深入学习ExtJS 或正在使用ExtJS 进行开发朋友们使用。该指南当前在 作为VIP 文档发布，供该站的VIP 用户阅读及下载。凡是购买了ExtJS实用开发指南文档的VIP 用户，都可以在该指南印刷版出版后均会免费得到相应的印刷版本。最后，希望广大网友把阅读本教程中的发现的错误、不足及建议等反馈给我们，让我们一起共同学习、共同进步，下面让我们一起进
4、入精彩的ExtJS 世界吧。ExtJS 实用简明教程 - 2 -第一章、ExtJS简介ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。ExtJS可以用来开发RIA也即富客户端的AJAX应用，下面是一些使用ExtJS开发的应用程序截图：(wlr的blog应用)ExtJS 实用简明教程 - 3 -(ExtJS的表格控件)(不同主题的ExtJS弹出框效果)ExtJS是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用
5、中。ExtJs 最开始基于YUI 技术，由开发人员Jack Slocum 开发，通过参考Java Swing等机制来组织可视化组件，无论从UI 界面上CSS 样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript 客户端技术的精品。ExtJS 实用简明教程 - 4 -第二章、开始ExtJS2.1获得ExtJS要使用ExtJS，那么首先要得到ExtJS 库文件，该框架是一个开源的，可以直接从官方网站下载，网址http:/ 所示的内容，可以选择选择1.1 或2.0 版本，本教程使用的2.0 版本。图1-1 ExtJs 不同版本下载选择页面单击上图中的【Download ex
6、t-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） 开源的协议
7、。ExtJS 实用简明教程 - 5 -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 需要在页面中引入extjs 的样式及extjs 库文件，样式文件为resources/css/extall.css，extjs 的js 库文件主要包含两个，adapter/ext/ext-base.js
8、及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
9、应用都是从Ext.onReady 开始的，使用ExtJS 应用程序的代码大致如下：fn 也可以写成一个匿名函数的形式，因此上面的代码可以改成下面的形式：function fn()alert(ExtJS库已加);Ext.onReady(fn);function fn()alert(ExtJS库已加载!);Ext.onReady(function ()alert(ExtJS库已加载!););ExtJS 实用简明教程 - 6 -2.3、ExtJS版的HelloWorld下面我们写一个最简单的ExtJS 应用，在hello.html 文件中输入下面的代码：图1-11 hello.html页面效果进一步
10、，我们可以在页面上显示一个窗口，代码如下：ExtJSExt.onReady(function()Ext.MessageBox.alert(hello,Hello,easyjf open source););ExtJS 实用简明教程 - 7 -在浏览hello.html，即可得在屏幕上显示一个窗口，如图xxx 所示。第三章Ext框架基础及核心简介3.1、Ext类库简介ExtJS 由一系列的类库组成，一旦页面成功加载了ExtJS 库后，我们就可以在页面中通过javascript 调用ExtJS 的类及控件来实现需要的功能。ExtJS 的类库由以下几部分组成：Ext.onReady(function
11、()var win=new Ext.Window(title:hello,width:300,height:200,html:Hello,easyjf open source);win.show(););ExtJS 实用简明教程 - 8 -底层API(core)：底层API 中提供了对DOM 操作、查询的封装、事件处理、DOM 查询器等基础的功能。其它控件都是建立在这些底层api 的基础上，底层api 位于源代码目录的core 子目录中，包括DomHelper.js、Element.js 等文件，如图xx 所示。控件(widgets)：控件是指可以直接在页面中创建的可视化组件，比如面板、选项板
12、、表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。控件位于源代码目录的widgets 子目录中，包含如图xx 所示。ExtJS 实用简明教程 - 9 -实用工具Utils：Ext 提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax 请求、Cookie 管理、CSS 管理等扩展等功能，如图所示：3.2、Ext的组件Ext2.0 对框架进行了非常大的重构，其中最重要的就是形成了一个结构及层次分明的组件体系，由这些组件形成了Ext 的控件，Ext 组件是由Com
13、ponent 类定义，每一种组件都有一个指定的xtype 属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。ExtJS 中的组件体系由下图所示：ExtJS 实用简明教程 - 10 -组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。基本组件有：xtype Classbox Ext.BoxComponent 具有边框属性的组件Button Ext.Button 按钮colorpalette Ext.ColorPalette 调色板component Ext.Component 组件container Ext.Container 容器cycle Ext.CycleButtondataview E
