ExtJS2.0开发与实践笔记[0]——初识ExtJS

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 并不是一个完全免费的项目，他以普通开源版及企业版共存的方式发行，企业版收费标准如下图：

<!--[if gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f"> <v:stroke joinstyle="miter" /> <v:formulas> <v:f eqn="if lineDrawn pixelLineWidth 0" /> <v:f eqn="sum @0 1 0" /> <v:f eqn="sum 0 0 @1" /> <v:f eqn="prod @2 1 2" /> <v:f eqn="prod @3 21600 pixelWidth" /> <v:f eqn="prod @3 21600 pixelHeight" /> <v:f eqn="sum @0 0 1" /> <v:f eqn="prod @6 1 2" /> <v:f eqn="prod @7 21600 pixelWidth" /> <v:f eqn="sum @8 21600 0" /> <v:f eqn="prod @7 21600 pixelHeight" /> <v:f eqn="sum @10 21600 0" /> </v:formulas> <v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect" /> <o:lock v:ext="edit" aspectratio="t" /> </v:shapetype><v:shape id="_x0000_i1025" type="#_x0000_t75" style='width:414.75pt; height:245.25pt'> <v:imagedata src="file:///C:/DOCUME~1/chenpeng/LOCALS~1/Temp/msohtml1/01/clip_image001.gif" o:title="20080311_ext_m" /> </v:shape><![endif]--><!--[if !vml]--><!--[endif]-->

我们可以通过http://extjs.com/download来获得最新版本的ext框架。

发展简史：

YUI-Ext	「Yahoo! UI Library」 的扩展。
Ext 1.0	「Yahoo! UI Library」 的扩展，同时也支持prototype.js和jquery等。
Ext 1.1	不再依赖「Yahoo! UI Library」，能够不依赖任何第三方组件而单独使用。
Ext 2.0	极大丰富界面库的一版，还在继续扩充中。

运行效果图：

<!--[if gte vml 1]><v:shape id="_x0000_i1026" type="#_x0000_t75" style='width:375pt;height:240.75pt'> <v:imagedata src="file:///C:/DOCUME~1/chenpeng/LOCALS~1/Temp/msohtml1/01/clip_image003.jpg" o:title="ext20" /> </v:shape><![endif]--><!--[if !vml]--><!--[endif]-->

如何开发ExtJS2.0应用？

针对ExtJS2.0，由于其通过浏览器解释执行，所以我们即可以使用记事本、EditPlus、UltraEdit等方式直接编辑文本文件，也可以通过IDE进行调试开发。

目前 Eclipse上已经有很多能够支持 ExtJS2.0的插件，如 Spket 等，此处不一一例举。本人在此仅以自己常用的 Aptana IDE 作为开发平台。

Aptana 是一个专注于 javascript 的开源 IDE 环境，它提供了丰富的 javascript 开发及调试资源，本人从 0.2 版本开始试用，目前最新版本为 1.1 ，我们可以通过 http://www.aptana.com/download 获得其最新版本。

原始版本的 Aptana1.1 只支持 Ext1.1 版本，所幸 Aptana 论坛有人提供了第三方的升级插件，我们可以通过 http://support.aptana.com/asap/browse/STU-547 或

http://orsox.mocis.at/download.php?list.1 进行下载，直接 copy 到 Aptana 的 plugins 文件夹下重启 Aptana 即可运行。

此时我们可以通过Aptana的[Window]项下[Preference]选项调整Aptana的设置选择支持Ext2.0。

<!--[if gte vml 1]><v:shape id="_x0000_i1027" type="#_x0000_t75" style='width:414.75pt;height:339.75pt'> <v:imagedata src="file:///C:/DOCUME~1/chenpeng/LOCALS~1/Temp/msohtml1/01/clip_image004.gif" o:title="20080311_ext_set" /> </v:shape><![endif]--><!--[if !vml]--><!--[endif]-->

ExtJS2.0的“Hello World”

在Aptana中使用ExtJS2.0，我们至少需要ExtJS2.0中的如下文件：

Adapter文件夹	框架及外部资源适配器，我们需要其中ext文件夹下的ext-base.js文件控制ExtJS全局。
Resources文件夹	一个文件夹，包含了css,image等Ext必须的资源
ext-all.js文件	一个压缩的单文件ExtJS文件集合

<!--[if gte vml 1]><v:shape id="_x0000_i1030" type="#_x0000_t75" style='width:192.75pt;height:196.5pt'> <v:imagedata src="file:///C:/DOCUME~1/chenpeng/LOCALS~1/Temp/msohtml1/01/clip_image006.jpg" o:title="ext20_all" /> </v:shape><![endif]--><!--[if !vml]--><!--[endif]-->

实际如下图：

<!--[if gte vml 1]><v:shape id="_x0000_i1031" type="#_x0000_t75" style='width:145.5pt;height:103.5pt'> <v:imagedata src="file:///C:/DOCUME~1/chenpeng/LOCALS~1/Temp/msohtml1/01/clip_image007.gif" o:title="20080311_ext_extset" /> </v:shape><![endif]--><!--[if !vml]--><!--[endif]-->

首先，我们在helloworld.js中建立如下内容

/**/ /**
*通过Ext输出HelloWorld,[Ext.onReady是ExtJS所定义的,当页面加载完毕之后,会自动调用
*Ext.onReady]
*
*@param{Object}''
*@param{Object}'HelloWorld!'
*/
Ext.onReady( function () ... {
//以Ext的alert打印'HelloWorld!'
Ext.MessageBox.alert('','HelloWorld!');
} );

而后，我们建立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的HelloWorld测试"
</ body >
</ html >

在Aptana中选择如下图，将自动调用您所选择的浏览器进行测试。

<!--[if gte vml 1]><v:shape id="_x0000_i1028" type="#_x0000_t75" style='width:414.75pt;height:339.75pt'> <v:imagedata src="file:///C:/DOCUME~1/chenpeng/LOCALS~1/Temp/msohtml1/01/clip_image008.gif" o:title="20080311_ext_run" /> </v:shape><![endif]--><!--[if !vml]--><!--[endif]-->

输出运行效果如下图：

<!--[if gte vml 1]><v:shape id="_x0000_i1029" type="#_x0000_t75" style='width:414.75pt;height:339.75pt'> <v:imagedata src="file:///C:/DOCUME~1/chenpeng/LOCALS~1/Temp/msohtml1/01/clip_image010.gif" o:title="20080311_ext_hello" /> </v:shape><![endif]--><!--[if !vml]--><!--[endif]-->

怎么样，超级简单，是人就会吧？下一回，我将针对ExtJS的特性开始做深入讲解。