ExtJS2.0開發與實踐筆記[0]——初識ExtJS

科技小能手發表於2017-11-15
JS筆記
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並不是一個完全免費的專案，他以普通開源版及企業版共存的方式發行，企業版收費標準如下圖：

我們可以通過[url]http://extjs.com/download[/url]來獲得最新版本的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應用？

針對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!`);
});


而後，我們建立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中選擇如下圖，將自動呼叫您所選擇的瀏覽器進行測試。

 
輸出執行效果如下圖：

 


本文轉自 cping 51CTO部落格，原文連結:http://blog.51cto.com/cping1982/130272


相關文章