我的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"></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服務器下，運行效果如下:

待續... ...