extjs開發環境設置及實踐收藏

1、下載并解壓縮extjs

2、下載eclipse及Eclipse AJAX Toolkit Framework(ATF)

本人一直習慣使用eclipse作為開發環境，各種開源的plugin使eclipse有全能的表現，運行效率也較其它IDE高。

 ATF包括一個Mozilla瀏覽器，在eclipse中切換到"Mozilla視圖"后,開發人員能進行html、dom、css的調試。但是如果要單步調試javascript，必須安裝dojo或其它幾個ajax開發框架，否則不能進行javascript調試。不明白javascript調試功能為何非要和dojo捆綁在一起，本人沒用過dojo，不能在eclipse里調試javascript，這一點有些不爽。

ATF的安裝稍微有些復雜，有一些Prerequisites要求先安裝，幸好安裝步驟在Eclipse網站上有說明，使用Eclipse的'Software Updates'來安裝，有一步驟是配置JSLint

3、下載并安裝JSEclipse

JSEclipse是一個eclipse plugin，作為javascript編輯器，使代碼有顏色區分、代碼格式化和輔助編碼功能

4、下載并安裝firefox和firebug

由于eclipse中沒有裝dojo不能進行javascript調試，所以本人下載并安裝firefox和firebug。firebug是firefox的plugin，功能類似ATF，能夠進行javascript、html、dom、css調試，而且firebug中用鼠標捕獲html元素比ATF的方便，ATF中捕獲html元素對含有extjs的Layout界面的支持不太好。

ATF和firebug可以互為補充使用，個人覺得比dreamweaver和ms的東東好，小巧靈活性能好，不要錢，獲取方便，嘿嘿！

5、從extjs論壇上下載并安裝JSEclipse plugin Ext of the code completion  library:

      http://extjs.com/forum/showthread.php?t=6112

     這個東東可完善JSEclipse對extjs的代碼自動完成功能，見論壇中的說明

6、Ext Debug Console

      只要頁面中包含ext-all-debug.js，按control+shift+home，會出現一個界面，可看到html結構，進行html和css調試，也是一個好東東！

7、在開發測試階段，不要使用ext-all.js，因為該文件是壓縮的js文件，不方便閱讀調試，以ext-all-debug.js代替，在生產環境中再使用ext-all.js

 這些天看了aptana,感覺比jseclipse好用多了,不過機器的內存好大一點,具體裝配置見:

http://extjs.com/blog/2007/06/29/building-a-desktop-application-with-ext-air-aptana-and-red-bull/

由于extjs的api doc不完整,有經驗的extjs使用者可以通過閱讀extjs的源碼,以得到未在文檔中公開的widgets、function、變量，可以得到事半功倍的效果！這一點對使用extjs進行開發非常有幫助，一般主要參考source/widgets目錄下的源碼。另外,使用firebug進行單步調試時,可以在向watch面板添加變量,通過展開層次視圖,就可以了解到可以訪問的屬性和方法。

按裝aptana和adobe AIR后的代碼輔助功能（eclipse中創建AIR工程）：

 

 

ATF中調試css:

 

 Firebug中調試javascript:




Spket IDE是目前支持Ext 2.0最為出色的IDE。 它采用.jsb project file 文件并將繼承于基類和所有文檔的內容嵌入到生成代碼提示的Script doc中。
由于Spket只是一個單純的編輯器，沒有其它格式的支持（如CSS），所以我的做法是用它的Eclipse插件形式，

啟動ECLIPSE Help → Software Updates → Find and Install… → Search for new features to install → New remote site…

名稱: “Spket”，地址URL是http://www.spket.com/update/

完成后重啟（自動會加載插件，也可CMD ECLIPSE目錄  使用命令 eclipse -clean  重新編譯）

Window → Preferences → Spket → JavaScript Profiles → New ；
輸入“ExtJS”點擊OK；
選擇“ExtJS” 并點擊“Add Library”然后在下拉條中選取“ExtJS”；
選擇 “ExtJS”并點擊“Add File”，然后在你的./ext-2.x/source目錄中選取“ext.jsb” 文件；

選擇你想加載的插件
設置新的ExtJS Profile，選中并點擊“JavaScript Profiles” 對話框右手邊的“Defalut”按鈕；

JS打開方式為 Window → Preferences → General→ Editors→ File...

選擇JS 或者新創建 設置默認打開方式 為 Spket JavaScript Editor(default)

 

OK本人已經成功使用MYECLIPSE6。1，打開你的JS吧。盡情的Ext點點點點吧！！屬性支持類似JAVA類，聲明后才可以獲得屬性，Spket 還封裝了JS常用函數。EXT編寫環境已經捆饒以久，可是說Spket+EXT是最完美的編寫EXT環境。

注：也適用過com.interaktonline.jseclipse插件，感覺功能不多（部分沒有更新），EXT本身也不支持。。加載的是XML格式文件，所以推薦使用EXT本身支持的ext.jsb