ExtJS5 (一) 超簡單整合到eclipse中,搭建簡單的開發環境


個人一直欣賞大神們的唯美前端頁面,而現在個人從事的是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驗證的相關配置即可)

 

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

我喜歡一切美好的東西


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM