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號