我的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服务器下，运行效果如下:

待续... ...