extjs幻灯片.ppt

EXTJS ID:SCSJ0033-EXTJS 概要 ExtJS简介 搭建ExtJS应用环境 ExtJS组件体系 ExtJS事件处理机制 ExtJS布局 ExtJS简介 ExtJS是一个很优秀的Ajax框架，可以用来开发带有华丽外观的RIA(富客户端)的AJAX应用，使得我们的B/S应用更加具有活力及生命力。由于它是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。  ExtJS简介 ExtJs最开始基于YUI技术，由开发人员Jack Slocum开发，通过参考Java Swing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，还是数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。 下面是一些使用ExtJS开发的应用程序截图： ExtJS应用截图 ExtJS应用截图 ExtJS应用截图 ExtJS应用截图 搭建ExtJS应用环境 要使用ExtJS，那么首先要得到ExtJS库文件，该框架是一个开源的，可以直接从官方网站下载，网址/download，进入下载页面可以看到大致如下图所示的内容，可以选择最新的2.0.2版本。 搭建ExtJS应用环境 单击上图中的【Download ext-2.0.2.zip】超链接进行下载，把下载得到的ZIP压缩文件解压缩到【D:\ExtCode】目录下，可以得到如下图所示的内容。 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下的所有类。 应用ExtJS 应用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框架的页面一般包括下面几句： ?link rel=stylesheet type=text/css” href=extjs/resources/css/ext-all.css script type=text/javascript src=extjs/adapter/ext/ext-base.js/script script type=text/javascript src=extjs/ext-all.js/script 应用ExtJS 在ExtJS库文件及页面内容加载完后，ExtJS会执行Ext.onReady中指定的函数。 应用ExtJS script function fn() { alert(ExtJS库已加!); } Ext.onReady(fn); /script 应用ExtJS fn也可以写成一个匿名函数的形式，因此上面的代码可以改成下面的形式： script Ext.onReady(function() { alert(ExtJS库已加!); }); /script 应用ExtJS 下面我们写一个最简单的ExtJS应用，在hello.html文件中输入下面的代码： 应用ExtJS html xmlns=“/1999/xhtml” ?head?meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” /?titleExtJS/title?link rel=“styleshe