eclipse+spket+extjs4.1開發環境搭建和代碼智能提示

搭建開發環境，首先要準備好幾樣東西：eclipse，tomcat，extjs4.1，還有spket，大家去相關網站下載，都去官網，既可以防止有毒又是最新版。這裡提一下spket的下載。spket的下載網站是：

http://www.spket.com/

點擊右上方的Downloads進入下載頁面，這個產品是個人使用免費，商業用途收費的，大家看著用。這裡是作為eclipse的外掛程式使用，按Plugin進入下載頁面把他下載下來。解壓，把裡面eclipse檔案夾下面的features和plugins複製到eclipse根目錄下與這兩個同名的檔案覆蓋，重啟eclipse，然後Window=>Preferences，看到左邊有spket選項證明你安裝成功了。

        繼續剛才的視窗：

點擊左邊選項的Spket

=>JavaScript Profiles

=>右邊的按鈕中點New

=>Name裡面輸入  ExtJS （這個名字隨意）

=>OK

=>選中ExtJS

=>Add Library

=>Library下拉選項中選中ExtJS

=>OK

=>選中剛才建立的那個ExtJS

=>Add File

=>選中在系統另一個地方解壓的ExtJS包的跟目錄下的build下的sdk.jsb3（這個檔案錯誤很多，在下一篇文章我會說明修改的方法，暫且先這樣用著）

=>然後會出現很多選擇框讓你選擇要哪些提示，我全勾了

=>然後按根節點的ExtJS（注意是最根部的那個ExtJS）

=>點擊右面的按鈕Default（這步很重要，不按他就不會自動提示了）

=>OK退出

        現在是讓spket作為javascript的預設編輯器：

Window

=>Preferences

=>General

=>Editors

=>File Associations

=>右面的File types選中*.js

=>下面的Associated editors選中Spket javascript Editor

=>按右面的按鈕Default

=>OK退出

然後你看到js檔案的表徵圖變成就代表你成功了。

 

怎麼建立一個ExtJS的工程呢，我先示範一下如何做一個HelloWord的。

建立一個工程（動態網頁，eclipse中是Dynamic Web Project），先不要引入ExtJS包，

右鍵工程表徵圖

=>Properties

=>Resource

=>Text file encoding

=>Other

=>UTF-8

=>左邊選Builders

=>去掉JavaScript Validation和Validation前面的勾

=>OK退出

還不能匯入ExtJS包，這樣會卡死eclipse的。去到工程根目錄下，找到.project，用記事本開啟，把兩處刪除掉：

 

第一處：

 

<buildCommand>

        <name>org.eclipse.wst.jsdt.core.javascriptValidator</name>

        <arguments>

        </arguments>

</buildCommand>

第二處：

 

<nature>org.eclipse.wst.jsdt.core.jsNature</nature>

 

儲存退出，refresh一下工程。再把ext包複製進工程，我現在是把整個複製進來，具體怎樣才是最小的發行包大家可以參照網上的各種資料，我也是初學，不是太清楚。

運行根目錄下的index.html（部署可能需要一段時間），能到首頁說明你成功了。具體的代碼提示我會在下一篇文章介紹。

 如果大家照著上面的文章做並且有興趣做了第一個ExtJS程式的話，你會發現代碼提示真的很少，連Ext.onReady和Ext.create都沒有提示。其實不是spket的錯，是ext自己做錯了。Ext根目錄下面的sdk.jsb3一大堆的都是錯誤，而這個正是我們的智能提示要引入的檔案，那智能提示當然有錯誤了。

        用js的編輯器開啟這個檔案，我用了dreamweaver開啟。你把裡面涉及到目錄的重頭到尾略略地看一次再比較真實的目錄，你就知道目錄錯了。錯誤的是基本上所有的目錄。錯誤大概有幾種類型：

pkgs/xxx應該是../pkgs/xxx

../platform/core/xxx應該是../src/core/xxx

../platform/src/xxx應該是../src/xxx

src/xxx應該是../src/xxx

還有其他的相對目錄都漏了../

 

經過觀察，大家想必也知道解決方案了。只是第二個和第三個錯了，其他都是漏了../。但是要修改起來很麻煩，怎麼辦呢？我們可以把檔案放在上一級目錄下面（ExtJS根目錄），看，第一個、第四個和第五個問題都解決了。那隻要把第二個和第三個替換掉就行了。但是替換要講一點技巧，要把前面的盡量多的字都打進去，才能避免把其他的都替換了。綜上，可以這樣替換：

把 "path": "../platform/core/  替換成 "path": "src/core/

把 "path": "../platform/src/  替換成 "path": "src/

替換的字最好是自己複製檔案的，要是這裡的變成了中文符號我就不負責了。

再找到以下代碼：

       {

           "src":"../platform/src/",

           "dest":"src"

       },

       {

           "src":"../platform/core/",

           "dest":"src/core"

       },

替換成

       {

           "src":"src/",

           "dest":"src"

       },

       {

           "src":"src/core/",

           "dest":"src/core"

       },

替換了以後把這個檔案放在Ext根目錄下面，就是上一級目錄，然後開啟eclipse，把ext的提示檔案換成這個sdk.jsb3檔案，所有勾都可以打上。然後開啟一個新的JS檔案，輸入以下代碼（為了實驗代碼是否有自動提示，建議手打）：

(function(){

        Ext.onReady(function(){

                  Ext.define("person",{

                           extend:"Ext.data.Model",

                           fields:[

                                    {name:"name",type:"auto"},

                                    {name:"age",type:"int"},

                                    {name:"email",type:"auto"}

                           ]

                  });

                  var p = Ext.create("person",{

                           name:"水山清風",

                           age:22,

                           email:"1112@1112.com"

                  });

                  Ext.MessageBox.alert("用define建立的Model","姓名：" + p.get("name") +"<br/>年齡：" + p.get("age") +"<br/>郵箱：" + p.get("email"));

        });

})();

你會發現 Ext.onReady和 Ext.create都有提示了。而 Ext.data.Model 你可以先輸入再加引號，那樣也有提示了，順帶一提，屬性名稱 field 和 extend也是有提示的。如果你不確定自己輸入的屬性名稱對不對，可以在加了引號之後按住ctrl鍵滑鼠移到最後一級名字那裡看看（例如Ext.data.Model中的Model）看是不是變色並且有底線了，如果有就代表有這個類。你也可以在按住ctrl的情況下按一下滑鼠跳到這個類的js檔案那裡。然後在另一個html檔案裡引入extjs-4.1.0/resources/css/ext-all.css
和 extjs-4.1.0/bootstrap.js （相對目錄根據自己的目錄路徑改變）一級這個js檔案，就可以在頁面看到效果了：