ExtJS2.0开发与实践笔记[0]——初识ExtJS
简短的前言:
随着网络技术的发展,良好的用户体验及丰富的客户端功能已成为Web程序所共同追逐的目标,并扮演非常重要的一环。基于Ajax应用思想的盛行,prototype、ext、dojo、yui、mootools等越来越多的第三方开源Javascript Library开始涌现,虽然这极大地增加了我们对web应用的扩展可能性,但同时也或多或少的增加了我们的学习难度。
为此,我准备在blog中逐步整理学习心得,已备查找需要及看客指正。
什么是
ExtJS?
按照
Ext
开发团队的说法,
ExtJS
从应用角度上讲是一个用户界面库,而不是一个
JavaScript Library
。原本作为
Yahoo! UI Library(
也就是
YUI)
的扩展而被开发出来,但从
1.1
版本开始由于支持者的增多,已经得到了必要的扩充,不再依赖于
YUI
。
ExtJS
可以与
prototype.js
和
jquery
等成熟的
js
库一起使用,也可以作为单独的应用部署到开发中去,
Adobe AIR
与
iPhone
开发工具都提供了对
Ext
的支持。
就我个人的观点而言,在业务处理上讲
ExtJS2.0
已非常完备,足以满足绝大多数
web
表示层应用的需求;但是对于解释执行的
javascript
来讲性能损耗问题却始终无法避免,因此个人不建议在要求响应速度的项目中使用
ExtJS
进行开发。
ExtJS
并不是一个完全免费的项目,他以普通开源版及企业版共存的方式发行,企业版收费标准如下图:
发展简史:
YUI-Ext
|
「Yahoo! UI Library」 的扩展。
|
Ext 1.0
|
「Yahoo! UI Library」 的扩展,同时也支持prototype.js和jquery等。
|
Ext 1.1
|
不再依赖「Yahoo! UI Library」,能够不依赖任何第三方组件而单独使用。
|
Ext 2.0
|
极大丰富界面库的一版,还在继续扩充中。
|
运行效果图:
如何开发ExtJS2.0应用?
针对ExtJS2.0,由于其通过浏览器解释执行,所以我们即可以使用记事本、EditPlus、UltraEdit等方式直接编辑文本文件,也可以通过IDE进行调试开发。
目前 Eclipse上已经有很多能够支持 ExtJS2.0的插件,如 Spket 等,此处不一一例举。本人在此仅以自己常用的 Aptana IDE 作为开发平台。
Aptana
是一个专注于
javascript
的开源
IDE
环境,它提供了丰富的
javascript
开发及调试资源,本人从
0.2
版本开始试用,目前最新版本为
1.1
,我们可以通过
[url]http://www.aptana.com/download[/url]
获得其最新版本。
原始版本的 Aptana1.1 只支持 Ext1.1 版本,所幸 Aptana 论坛有人提供了第三方的升级插件,我们可以通过 [url]http://support.aptana.com/asap/browse/STU-547[/url] 或 [url]http://orsox.mocis.at/download.php?list.1[/url] 进行下载,直接 copy 到 Aptana 的 plugins 文件夹下重启 Aptana 即可运行。
此时我们可以通过Aptana的[Window]项下[Preference]选项调整Aptana的设置选择支持Ext2.0。
ExtJS2.0的“Hello World”
在Aptana中使用ExtJS2.0,我们至少需要ExtJS2.0中的如下文件:
Adapter文件夹
|
框架及外部资源适配器,我们需要其中ext文件夹下的ext-base.js文件控制ExtJS全局。
|
Resources文件夹
|
一个文件夹,包含了css,image等Ext必须的资源
|
ext-all.js文件
|
一个压缩的单文件ExtJS文件集合
|
实际如下图:
首先,我们在helloworld.js中建立如下内容
/**
* 通过Ext输出Hello World,[Ext.onReady是ExtJS所定义的,当页面加载完毕之后,会自动调用
* Ext.onReady]
*
* @param {Object} ''
* @param {Object} 'Hello World!'
*/
Ext.onReady( function () {
//以Ext的alert打印'Hello World!'
Ext.MessageBox.alert('','Hello World!');
} );
* 通过Ext输出Hello World,[Ext.onReady是ExtJS所定义的,当页面加载完毕之后,会自动调用
* Ext.onReady]
*
* @param {Object} ''
* @param {Object} 'Hello World!'
*/
Ext.onReady( function () {
//以Ext的alert打印'Hello World!'
Ext.MessageBox.alert('','Hello World!');
} );
而后,我们建立helloworld.html文件,内容如下
<
html
>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" >
< title > HelloExt </ title >
<!-- ExtJS资源加载 -->
< link rel ="stylesheet" type ="text/css" href ="resources/css/ext-all.css" />
< script type ="text/javascript" src ="adapter/ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="ext-all.js" ></ script >
<!-- 我的js文件 -->
< script type ="text/javascript" src ="helloworld.js" ></ script >
</ head >
< body >
"ExtJS的Hello World测试"
</ body >
</ html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" >
< title > HelloExt </ title >
<!-- ExtJS资源加载 -->
< link rel ="stylesheet" type ="text/css" href ="resources/css/ext-all.css" />
< script type ="text/javascript" src ="adapter/ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="ext-all.js" ></ script >
<!-- 我的js文件 -->
< script type ="text/javascript" src ="helloworld.js" ></ script >
</ head >
< body >
"ExtJS的Hello World测试"
</ body >
</ html >
在Aptana中选择如下图,将自动调用您所选择的浏览器进行测试。
输出运行效果如下图:
本文转自 cping 51CTO博客,原文链接:http://blog.51cto.com/cping1982/130272