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了呢!
點擊(此處)摺疊或打開
-
function init() {
-
Ext.MessageBox.alert("ExtJS", "Hello
ExtJS");
-
}
- 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")即可;