首頁 > 開發者 > 網站開發

EXTJS學習筆記--搭建實驗環境

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style   blog   http   color   java   使用   os   io   

  1. 1.目的

在eclipse中搭建EXTJS的基礎環境，學習如何按照從官方下載的代碼中搭建新的Extjs工程

  1. 2.學習過程中遇到的問題
    • ext-4.2.1-gpl與ext-4.2.1-commercial的區別

       ext-4.2.1-gpl：開源版本，使用GPL開源協議

       ext-4.2.1-commercial：商業版本，收費，穩定

作為個人研究來講，可以使用ext-4.2.1-gpl。

    • 下載的Extjs目錄中各個檔案說明

       主要目錄說明

    • builds目錄：壓縮後的ExtJS代碼，體積更小，更快，但是一般不使用；
    • cmd目錄：未知，個人理解是給extjs命令列模式使用，一般不用
    • docs目錄：開發文檔；
    • examples目錄：官方示範樣本；
    • locale目錄：多國語言資源檔，使用者本地化，例如需要選擇簡體中文時，需要引入簡體中文檔案；
    • packages目錄：ExtJS各部分功能的打包檔案；
    • plugins目錄:EXTJS中使用的外掛程式，主要是flash相關的外掛程式
    • resource目錄：ExtJS所需要的CSS與圖片檔案；
    • src目錄：未壓縮的原始碼目錄
    • welcome目錄：首頁所需要的樣式，圖片等檔案

      主要檔案說明

    • bootstarp.js：ExtJS庫引導檔案,可通過參數自動切換ext-all.js與ext-all-dev.js；
    • ext-all.js，ext-all-dev.js，ext-all-debug.js，ext-all-debug-w-comments.js：這是一組，都包含全部的EXTJS檔案。每個檔案分別代表一種使用情境：運行環境，開發環境，調試環境，帶注釋調試環境。
    • ext-all-rtl.js,ext-all-rtl-dev.js,ext-all-rtl-debug.js,ext-all-rtl-debug-w-comments.js：這四個是一組，表示支援從右至左語言（像希伯來語和阿拉伯語一樣）。每個檔案分別代表一種使用情境：運行環境，開發環境，調試環境，帶注釋調試環境。

         執行個體：

             

    • ext.js,ext-dev.js,ext-debug.js,ext-debug-w-comments.js:這四個是一組，代表最精簡的EXTJS代碼。每個檔案分別代表一種使用情境：運行環境，開發環境，調試環境，帶注釋調試環境。
    • ext-theme-access.js，ext-theme-classic.js，ext-theme-classic-sandbox.js，ext-theme-gray.js，ext-theme-neptune.js：這幾個是一組，配合EXTJS的不同樣式使用。
    • file-header.js：未知。檔案為空白。
    • bootstrap.js檔案作用：根據不同的情況來載入不同的js檔案。 
/** * 載入本檔案相同路徑中的庫 * * 滿足以下條件將自動載入 ext-all-dev.js： * - 當前主機名稱是 localhost * - 當前主機名稱是 IP v4 地址 * - 當前協議是 "file:" * * 其它情況下將載入 ext-all.js (minified) */
    • 建立web應用需要用的檔案

       建立一個標準的web應用需要使用的檔案有：

         1.bootstrap.js,ext-all-dev.js,ext-all.js:用來載入基本的Extjs環境。

         2.locale\ext-lang-zh_CN.js：用來支援中文。

         3.resources目錄：用來載入樣式和圖片等。

    • spket外掛程式安裝配置

     1.下載安裝spket:

         安裝路徑：http://www.agpad.com/update

       

     2.配置

       

       

       

      

      

      

    • HelloWord搭建 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><!--extJs檔案--><script type="text/javascript" src="../../js/bootstrap.js" ></script><!--漢化語言套件--><script type="text/javascript" src="../../js/locale/ext-lang-zh_CN.js" ></script><!-- 樣式檔案 --><link rel="stylesheet" type="text/css"     href="../../js/resources/css/ext-all.css" /><title>Insert title here</title></head><body>    <script type="text/javascript">        Ext.onReady(function() {            Ext.MessageBox.alert(‘標題‘, ‘Hello World!‘);        });    </script></body></html>
    • 海王星皮膚使用說明 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><!--extJs檔案--><script type="text/javascript" src="../../js/bootstrap.js" ></script><!--漢化語言套件--><script type="text/javascript" src="../../js/locale/ext-lang-zh_CN.js" ></script><!-- 海文星樣式檔案 --><link rel="stylesheet" type="text/css" href="../../js/resources/ext-theme-neptune/ext-theme-neptune-all.css" /><!-- 比需要加，否則會出現樣式問題 --><script src="../../js/ext-theme-neptune.js" type="text/javascript"></script><title>Insert title here</title></head><body>    <script type="text/javascript">        Ext.onReady(function() {            Ext.MessageBox.alert(‘標題‘, ‘Hello World!‘);        });    </script></body></html>

還有我上面強調過一定要引入主題相對應的js檔案，如果不引用會變成這樣：

仔細看右上方的關閉按鈕表徵圖會向右方位移



sdjnzqr
出處：http://www.cnblogs.com/sdjnzqr/
著作權：本文著作權歸作者和部落格園共有
轉載：歡迎轉載，但未經作者同意，必須保留此段聲明；必須在文章中給出原文串連；否則必究法律責任

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More