2013年3月5日 星期二

ExtJs 環境部署

  1. 請先連到 ExtJs 官網的下載頁, 點選開源的 GPL 版本下載, 目前 (2013-01-02) 為 4.1.1a 版.
  2. 解開 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 或完成版.
  3. 將專案目錄下欲取用 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>
  4. 如果不自行部署, 可以利用 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 來測試網頁了.
  5. 測試範例 (訊息盒) :

    訊息盒範例

    <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 提供.

於

沒有留言:

張貼留言