| « | December 2025 | » | | 日 | 一 | 二 | 三 | 四 | 五 | 六 | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | | | | |
|
公告 |
| 本博客在此声明所有文章均为转摘，只做资料收集使用。并无其他商业用途。 |
| Blog信息 |
|
blog名称:
日志总数:210
评论数量:205
留言数量:-19
访问次数:931005
建立时间:2007年5月10日 |
| |
|
 [EXT2.0]ExtJS2.0开发与实践笔记[0]——初识ExtJS
文章收藏, 网上资源, 软件技术, 电脑与网络
李小白 发表于 2008/4/24 22:44:41 |
|
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 !vml]-->500)this.width=500'><!--[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 !vml]-->500)this.width=500'><!--[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 !vml]-->500)this.width=500'><!--[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 !vml]-->500)this.width=500'><!--[endif]-->
实际如下图：
<!--[if !vml]-->500)this.width=500'><!--[endif]-->
首先，我们在helloworld.js中建立如下内容
500)this.width=500'>500)this.width=500'>/**//**500)this.width=500'> * 通过Ext输出Hello World,[Ext.onReady是ExtJS所定义的,当页面加载完毕之后,会自动调用500)this.width=500'> * Ext.onReady]500)this.width=500'> * 500)this.width=500'> * @param {Object} ''500)this.width=500'> * @param {Object} 'Hello World!'500)this.width=500'> */500)this.width=500'>500)this.width=500'>Ext.onReady(function() ...{500)this.width=500'> //以Ext的alert打印'Hello World!'500)this.width=500'> Ext.MessageBox.alert('','Hello World!');500)this.width=500'>});
而后，我们建立helloworld.html文件，内容如下
500)this.width=500'><html>500)this.width=500'><head>500)this.width=500'> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">500)this.width=500'> <title>HelloExt</title>500)this.width=500'> <!--ExtJS资源加载-->500)this.width=500'> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />500)this.width=500'> <script type="text/javascript" src="adapter/ext/ext-base.js"></script>500)this.width=500'> <script type="text/javascript" src="ext-all.js"></script>500)this.width=500'> <!--我的js文件-->500)this.width=500'> <script type="text/javascript" src="helloworld.js"></script>500)this.width=500'></head>500)this.width=500'><body>500)this.width=500'> "ExtJS的Hello World测试"500)this.width=500'></body>500)this.width=500'></html>
在Aptana中选择如下图，将自动调用您所选择的浏览器进行测试。
<!--[if !vml]-->500)this.width=500'><!--[endif]-->
输出运行效果如下图：
<!--[if !vml]-->500)this.width=500'><!--[endif]-->
怎么样，超级简单，是人就会吧？下一回，我将针对ExtJS的特性开始做深入讲解。 |
|
|