ExtJS5 （一） 超簡單整合到eclipse中，搭建簡單的開發環境

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

個人一直欣賞大神們的唯美前端頁面，而現在個人從事的是MIS系統等相關的開發，故決定學習ExtJS，目前最新版本是5.0，就從5.0開始吧。

 

作為java開發人員，自然而然的想在eclipse中搞個extjs的簡單開發環境，以後再慢慢豐富，開始吧~

第一步：從官網下載extjs，目前是5.0版本

第二步：用eclipse建立一個動態web工程

第三步：在工程的WebContent目錄下建立一個檔案夾，叫作ExtJS5。

第四步：解壓從官網下載的extjs，解壓之後，目錄結構如下：

看一下根目錄下的index，瞭解了使用extjs時，依賴的一些檔案的位置，一般需要根目錄下的ext-all.js和build檔案夾中的一些css和package檔案夾。

將依賴的extjs檔案複製到工程中建立的extjs5檔案夾下即可，工程結構如下：

經過上面四步，好啦，可以編寫html檔案了，在WebContent目錄下，建立一個經典的index.html檔案，並引用extjs相關的檔案，代碼如下：

在head標籤內，分別引用了ext提供的某個主題的css檔案和ext提供的主題js及架構js檔案

 

引用完ext相關的檔案之後，就要以ext的規範建立一個小視窗了，我將這個建立小視窗的代碼放置在了WebContent目錄下的自己建立的AppJS目錄下，

代碼是參數ext的樣本編寫的，如下所示：

說實話，目前還不清楚這段代碼的詳細規格，但通過名稱能夠猜測出其大概的意思。

 

好了，此時，算是準備工作完工了，發布到經典的tomcat下，訪問經典的http://localhost:8080/工程名稱，即可看到效果了：

 

完工。

（對了，引用extjs的相關檔案之後，eclipse預設會去對這些檔案進行驗證，造成eclpise超卡，

解決辦法就是刪除掉工程目錄下的工程檔案.project內的有關js驗證的相關配置即可）

 

/********************************************外星人喬丹拍板時間***************************************/

我喜歡一切美好的東西