我的ExtJS之旅---開端

作為優秀的Web前端架構，ExtJS的發展已經曆經了2.x、3.x、4.x等版本更替，直到今天的4.2.1，期間的版本變革中，ExtJS發生了很多微妙的變化。如果再從2.x版本開始學起，将會是個痛苦的過程（至少我個人這樣認為）。是以就從4.x開始學習吧......

首先去官網下載下傳extjs依賴的開發庫:http://www.sencha.com/products/extjs/download。下載下傳完解壓後得到關于ExtJS的包括官方執行個體、API文檔、資源等檔案和檔案夾。

像學習其他進階計算機語言一樣，首先做出一個ExtJS版的HelloWorld執行個體。

打開MyEclipse，建立一個Web Project，拷貝入ExtJS依賴的css、js等檔案，經過我的研究隻需引入以下檔案即可(為了提高Web程式運作速度，應盡量少的引入外部檔案)：

隻需在下載下傳的檔案中找相應的檔案即可，需要說明的是，由于我使用了neptune主題（藍色的，個人比較喜歡），需要修改ext-all.css中内容，其實ext-all.css中就一句話:@import '../ext-theme-classic/ext-theme-classic-all.css';若使用neptune主題隻需修改為：@import '../ext-theme-neptune/ext-theme-neptune-all.css';即可；将ext檔案夾拷到WebRoot檔案夾下。再打開index.jsp檔案，添加對ExtJS相關檔案的引用：

<link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css" target="_blank" rel="external nofollow" ></link>
<script type="text/javascript" src="./ext/bootstrap.js"></script>
<script type="text/javascript" src="./ext/ext-lang-zh_CN.js"></script>
           

其中ext-all.css檔案是需要引入的ExtJS樣式檔案，bootstrap.js會根據目前是開發模式還是調試模式引入相應的js檔案，ext-lang-zh_CN.js提供語言支援。

然後開始寫HelloWorld的代碼了。

<script type="text/javascript">
	Ext.onReady(function() {
		Ext.Msg.alert("First ExtJS Example","Hello World!");
	});
</script>
           

最後部署該Web應用到Tomcat伺服器下，運作效果如下:

待續... ...