- 請先連到 ExtJs 官網的下載頁, 點選開源的 GPL 版本下載, 目前 (2013-01-02) 為 4.1.1a 版.
- 解開 ext-4.1.1a.zip 後, 將其中的 ext-all.js, ext-all-debug.js, bootstrap.js 檔與 resources 目錄複製到專案目錄下.
其中 ext-all-debug.js 是開發階段使用的版本, 程式若有問題可看到錯誤資訊, 而 ext-all.js 則為專案完成後的使用版, 是利用 YUI Comressor 壓縮 (消除空白, 換行與註解) 與混淆 (所有區域變數重新命名為短的名稱) 的版本. 而 bootstrap.js 則是會依據環境動態載入 debug 或完成版.
- 將專案目錄下欲取用 ExtJs 的網頁的標頭中加入如下標籤即可 :
產品版部署方式
<link rel="stylesheet" href="resources/css/ext-all.css" />
<script type="text/javascript" src="ext-all.js"></script>
部署 ext-all.js 將匯入完整的 ExtJS 框架, 適合正式服務使用.
開發版部署方式
<link rel="stylesheet" href="resources/css/ext-all.css" />
<script type="text/javascript" src="ext-all-debug.js"></script>
部署 ext-all-debug.js 將匯入未壓縮版的 ExtJS, 適合開發時用.
自動部署方式
<link rel="stylesheet" href="resources/css/ext-all.css" />
<script type="text/javascript" src="bootstrap.js"></script>
部署 bootstrap.js 時, 若為下列三種情形會動態匯入 ext-all-debug.js, 否則匯入 ext-all.js :
(1). 主機名稱為 localhost
(2). 主機名稱為 IPv4 位址
(3). 協定為 file
Sencha CDN 部署方式
<link rel="stylesheet" href="http://cdn.sencha.com/ext-4.1.1-gpl/resources/css/ext-all.css" />
<script type="text/javascript" src="http://extjs.cachefly.net/ext-4.1.1-gpl/ext-all.js"></script>
- 如果不自行部署, 可以利用 Sencha 公司的 CDN 來匯入 ExtJS4 (參考 : Sencha 論壇). 上面是產品版的 CDN 位址 :
http://cdn.sencha.com/ext-4.1.1-gpl/resources/css/ext-all.css
http://extjs.cachefly.net/ext-4.1.1-gpl/ext-all.js
同樣地, 開發版用的是 :
http://extjs.cachefly.net/ext-4.1.1-gpl/ext-all-debug.js
而動態部署則是 :
http://extjs.cachefly.net/ext-4.1.1-gpl/bootstrap.js
以上部署 ExtJS 後, 即可在本機目錄上測試開發 ExtJS 專案, 除了 Ajax 應用之外 (因為 Ajax 功能需要網頁伺服器才能顯示結果). 對於 Ajax 相關的專案, 必須將以上之 ExtJS 檔案與目錄部署到網頁伺服器. 若在本機測試, 以 AppServ 安裝 PHP 為例, 可將 ext-all.js, ext-all-debug.js, bootstrap.js 檔與 resources 目錄複製到 C:\AppServ\www\extjs 的專案目錄下, 如此便可用 http://localhost/extjs 來測試網頁了.
- 測試範例 (訊息盒) :
訊息盒範例
<html>
<head>
<title>ExtJS4 Test</title>
<link href="resources/css/ext-all.css" rel="stylesheet"></link>
<script src="ext-all.js" type="text/javascript"></script>
</head>
<body>
<script>
Ext.onReady(function() {
Ext.MessageBox.alert("訊息", "您好! Hello World!");
});
</script>
</body>
</html>
2014-07-09 補充 :
Sencha 公司的 ExtJS CDN GPL 版本最新僅支援到 4.2.0 版, 加上繁體中文化如下 :
Sencha CDN 部署方式
<link rel="stylesheet" href="http://cdn.sencha.com/ext-4.2.0-gpl/resources/css/ext-all.css" />
<script type="text/javascript" src="http://cdn.sencha.com/ext-4.2.0-gpl/ext-all.js"></script>
<script type="text/javascript" src="http://cdn.sencha.com/ext-4.2.0-gpl/locale/ext-lang-zh_TW.js"></script>
注意, 這裡統一由 cdn.sencha.com 提供資源, 也可全部改為 extjs.cachefle.net 提供.
沒有留言 :
張貼留言