ExtJS2.0开发与实践笔记[0]——初识ExtJS
简短的前言：
随着网络技术的发展，良好的用户体验及丰富的客户端功能已成为Web程序所共同追逐的目标，并扮演非常重要的一环。基于Ajax应用思想的盛行，prototype、ext、dojo、yui、mootools等越来越多的第三方开源Javascript Library开始涌现，虽然这极大地增加了我们对web应用的扩展可能性，但同时也或多或少的增加了我们的学习难度。
为此，我准备在blog中逐步整理学习心得，已备查找需要及看客指正。
我们可以通过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 |
极大丰富界面库的一版，还在继续扩充中。 |
运行效果图：
如何开发ExtJS2.0应用？
目前Eclipse上已经有很多能够支持ExtJS2.0的插件，如Spket等，此处不一一例举。本人在此仅以自己常用的Aptana IDE作为开发平台。
原始版本的Aptana1.1只支持Ext1.1版本，所幸Aptana论坛有人提供了第三方的升级插件，我们可以通过http://support.aptana.com/asap/browse/STU-547或
此时我们可以通过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!');});而后，我们建立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>在Aptana中选择如下图，将自动调用您所选择的浏览器进行测试。
输出运行效果如下图：
怎么样，超级简单，是人就会吧？下一回，我将针对ExtJS的特性开始做深入讲解。
浙公网安备 33010602011771号