Ext4.2.1學習歷程之一:環境搭建及Hello ExtJS4.2

1、從官網下載ExtJS4.2資源包,解壓開有源代碼、API文檔、演示程序;
2、官網地址:
http://www.sencha.com/products/extjs
3、在Eclipse中新建項目,我這是建的maven項目

4、將下載的extjs需要的資源文件複製到項目中,我放的是在webapp下的resources/js/ext4.2中,那麼的資源文件不需要全導入,只需要導入我們用的如下:

5、在webapp下新建index.jsp,並將js腳本bootstrap.js和需要用到的css樣式ext-all-neptune.css(海王星的樣式)引入,需要的話再把漢化文件ext-lang-zh_CN.js引入;
    <link  rel="stylesheet"  href="resources/js/ext4.2/resources/css/ext-all-neptune.css"/>
    <script type="text/javascript" src="resources/js/ext4.2/bootstrap.js"></script>
   <script type="text/javascript" src="resources/js/ext4.2/locale/ext-lang-zh_CN.js"></script>
6、這時候就可以使用Ext開始編寫我們的代碼了,格式:<script type="text/javascript">代碼部分</script>,將下面代碼替換“格式代碼”部分,運行程序試試,這時候界面是不是出來提示框Hello ExtJS了呢!

點擊(此處)摺疊或打開

  1. function init() {
  2.          Ext.MessageBox.alert("ExtJS", "Hello ExtJS");
  3.       }
  4.     Ext.onReady(init)

需要注意的是

1、Ext.MessageBox.alert必須在onReady加載完成後才能執行,應該是ext的內部執行機制吧!單獨執行是不可以的,否則會報dom爲空或不是對象。
2、不管怎麼樣如果你感覺到導入的extjs資源包影響到你的eclipse,甚至直接卡死,那是因爲eclipse在構建的導入的資源文件,因此附上解決辦法,那就是關掉eclipse對js的build,方法如下:
進入你的項目文件下找到.project並用文本或者其他編輯器打開,找到
<buildSpec>
<buildCommand>
<name>org.eclipse.wst.jsdt.core.javascriptValidator</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>

<natures>
<nature>org.eclipse.wst.jsdt.core.jsNature</nature>
</natures>
並將黃色部分刪除即去掉了對js的驗證;重啓eclipse試一下吧

3、如果有使用jetty進行調試的那麼你不得不解決一個問題那就是js和html文件被鎖住無法在jetty運行的情況下修改js和html,解決辦法如下:
因爲我是做的jetty內嵌服務器所以比較好配置:找到jetty*.jar中的webdefault.xml並修改useFileMappedBuffer的值爲false。修改完成後將修改後的webdefault.xml複製到自己項目中某個位置(src/main/resources/)並在自己寫的jetty服務類中加入 context.setDefaultsDescriptor("src/main/resources/webdefault.xml")即可;
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章