没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
ExtJS 实用简明教程 [ 收集整理 : 龚辟愚、 QQ 群: 19274175]
- 1 -
序 言
ExtJS 是一个很不错的 Ajax 框架, 可以用来开发带有华丽外观的富客户端应用, 使得 我
们的 b/s 应用更加具有活力及生命力。 ExtJS 是一个用 javascript 编写,与后台技术无关的 前
端 ajax 框架。因此,可以把 ExtJS 用在 .Net 、 Java 、 Php 等各种开发语言开发的应用中。
最近我们在几个应用都使用到了 ExtJS , 对公司以前开发的一个 OA 系统也正在使用 ExtJS 2.0
进行改造, 使得整个系统在用户体验上有了非常大的变化。 本教程记录了前段时间本人学 习
ExtJS 的一些心得及小结, 希望能帮助正在学习或准备学习 ExtJS 的朋友们快速走进 ExtJS2 .0
的精彩世界。
教程包括 ExtJS 的新手入门、组件体系结构及使用、 ExtJS 中各控件的使用方法及示例
应用等, 是一个非常适合新手的 ExtJS 入门教程。 本教程主要是针对 ExtJS2.0 进行介绍, 全
部代码、截图等都是基于 ExtJS2.0 。
在学习了本教程后, 可以下载 wlr.easyjf.com 这个基于 ExtJS2.0 开发的单用户 Blog 系 统
的源代码,这个系统是我们团队中的 williamraym 与大峡等人开发的一个演示系统,系统 源
码整体质量比较高,通过学习这套源代码相邻一定能提高您 ExtJS 的综合水平。
本教程比较适合 ExtJS 的新手作为入门教程及手册使用,并在我的博客
http://www.easyjf.com/blog/lengyu/ 上进行发布; 应一些朋友的要求, 根据本教程的写作思路
,
我还编写了比本教程更为详细的《 ExtJS 实用开发指南》 ,包含详细的 ExtJS
框架使用方法、
各个控件详细配置参数、 属性、 方法及事件介绍, 与服务器端集成及一个完整的示例应用 系
统介绍等内容,适合想深入学习 ExtJS 或正在使用 ExtJS 进行开发朋友们使用。该《指南》
当前在 wlr.easyjf.com 作为 VIP 文档发布, 供该站的 V IP
用户阅读及下载。 凡是购买了 《
E xtJS
实用开发指南》文档的 VIP 用户,都可以在该指南印刷版出版后均会免费得到相应的印刷
版本。
最后, 希望广大网友把阅读本教程中的发现的错误、 不足及建议等反馈给我们, 让我 们
一起共同学习、共同进步,下面让我们一起进入精彩的 ExtJS 世界吧。
本页已使用福昕阅读器进行编辑。
福昕软件(C)2005-2009,版权所有,
仅供试用。
ExtJS 实用简明教程 [ 收集整理 : 龚辟愚、 QQ 群: 19274175]
- 2 -
第一章、 ExtJS
ExtJS
ExtJS
ExtJS
简介
ExtJS 是一个 Ajax 框架, 是一个用 javascript 写的, 用于在客户端创建丰富多彩的 web 应 用
程序界面。 ExtJS 可以用来开发 RIA 也即富客户端的 AJAX 应用, 下面是一些使用 ExtJS 开发 的
应用程序截图:
(wlr 的 blog 应用 )
本页已使用福昕阅读器进行编辑。
福昕软件(C)2005-2009,版权所有,
仅供试用。
ExtJS 实用简明教程 [ 收集整理 : 龚辟愚、 QQ 群: 19274175]
- 3 -
(ExtJS 的表格控件 )
( 不同主题的 ExtJS 弹出框效果 )
ExtJS 是一个用 javascript 写的,主要用于创建前端用户界面,是一个与后台技术无关的
前端 ajax 框架。因此,可以把 ExtJS 用在 .Net 、 Java 、 Php 等各种开发语言开发的应用中。
ExtJs 最开始基于 YUI 技术,由开发人员 Jack Slocum 开发,通过参考 Java Swing
等机制来组织可视化组件,无论从 UI 界面上 CSS 样式的应用,到数据解析上的异常处理,
都可算是一款不可多得的 JavaScript 客户端技术的精品。
ExtJS 实用简明教程 [ 收集整理 : 龚辟愚、 QQ 群: 19274175]
- 4 -
第二章、开始 ExtJS
ExtJS
ExtJS
ExtJS
2.1
2.1
2.1
2.1
获得 ExtJS
ExtJS
ExtJS
ExtJS
要使用 ExtJS ,那么首先要得到 ExtJS 库文件,该框架是一个开源的,可以直接从官方
网站下载, 网址 http://extjs.com/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 ) 开源的
协议。
本页已使用福昕阅读器进行编辑。
福昕软件(C)2005-2009,版权所有,
仅供试用。
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.2
2.2
2.2
2.2
、 应用 ExtJS
ExtJS
ExtJS
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 ,或
a dapter/prototype/ext-prototype-adapter.js 等。 因此, 要使用 ExtJS 框架的页面中一般包括下 面
几句:
在 ExtJS 库文件及页面内容加载完后, ExtJS 会执行 Ext.onReady 中指定的函数,因此
可以用,一般情况下每一个用户的 ExtJS 应用都是从 Ext.onReady 开始的,使用 ExtJS 应用
程序的代码大致如下:
fn 也可以写成一个匿名函数的形式,因此上面的代码可以改成下面的形式:
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script>
function fn()
{
alert( ‘ ExtJS 库已加 ’ );
}
Ext.onReady(fn);
</script>
<script>
function fn()
{
alert( ‘ ExtJS 库已加载 ! ’ );
}
Ext.onReady(function ()
{
alert( ‘ ExtJS 库已加载 ! ’ );
}
);
本页已使用福昕阅读器进行编辑。
福昕软件(C)2005-2009,版权所有,
仅供试用。
剩余66页未读,继续阅读
资源评论
liyx
- 粉丝: 0
- 资源: 5
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功