二、第一個ExtJS程式:helloExtJS

開發前的準備

下載並解壓ExtJS包後，可以得到的檔案目錄結構：

在實際開發過程中並不需要所有的檔案和目錄，所需的包含如下目錄即可：

若使用eclipse進行開發，只需將上述檔案複製到WebRoot目錄或其子目錄。

開始建立firstextjs.html 在使用ExtJS之前，需要在頁面引入相應的樣式和js檔案，一般包括的最小集合是這樣：ext-all.js，adapter/ext/ext-base.js，locale/ext-lang-zh_CN.js和整個resources目錄。

ext-all.js，adapter/ext/ext-base.js 就包含了ext的所有功能，所有的js指令碼都在這裡了。

locale/ext-lang-zh_CN.js 是中文翻譯。

resources目錄下是css樣式表和圖片。

注意js檔案的匯入順序 編寫html

第一個ExtJS程式<script type="text/javaScript" src="script/adapter/ext/ext-base.js"></script><script type="text/javaScript" src="script/ext-all.js"></script><script type="text/javascript" src="script/locale/ext-lang-zh_CN.js"></script><script type="text/javascript">/* Ext.onReady(function(){var d = new Date();var time = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();Ext.MessageBox.alert('報時','現在的時間是：'+time);});  *///onReady方法在頁面完畢時調用初始化函數：也就是onReady的第一個參數指定的函數Ext.onReady(function(){Ext.MessageBox.alert('helloworld','這是我的第一個ExtJS程式');});</script>

最終效果

至此，第一個ExtJS程式就搞定了。過程中一定要仔細認真，不要出現低級錯誤。我就是在引入js檔案時路徑寫錯了，搞了大半天o(︶︿︶)o 。不過不明白為什麼最後的顯示效果還是那麼醜。囧

修改：

之前在resources目錄下沒有匯入images，導致顯示有問題。新的目錄結構：

重新匯入images後，可以正常顯示：