ExtJS学习笔记-01
很早就体验过ext的强大，但是一直忙于公司项目的开发没有机会好好深入学习一下。24日从网上订购的《深入浅出Ext JS》终于收到了。先不说书写的好坏，有本书做为参考和指导至少提高学习效率和质量是没有问题的。
由于平时大部分时间肯定会放在公司项目上，学习过程我打算是通过书的指引和网上查阅资料同步进行，我将在我的博客中记录我每天的学习内容做为备忘，同时也给感兴趣的朋友提供些思路，共同探讨共同学习的过程才是最快乐的！
下面就开始我的ExtJS学习之路吧……
第一章 Ext的下载和开发环境
Ext的下载地址：http://www.extjs.com/products/extjs/download.php
目前的版本是Ext JS 2.2.1
1.1 Ext的目录结构介绍：
| adapter | Ext核心代码和底层库，包括jQuery,Prototype和YUI的适配器 |
| build | Ext压缩后的代码，压缩的代码体积小，加载快。 |
| docs | Ext的文档，最重要的是Ext的API。 |
| examples | 这个不用多说了，是Ext提供的例子，是初学必看！ |
| resources | Ext的图片、样式都存放在这里。 |
| source | Ext的源码文件（相对build而言，是未压缩的代码） |
| CHANGES.html | 版本修正的列表文件 |
| ext-all.js | Ext的核心库，使用时必须引入的文件！ |
| ext-all-debug.js | 是ext-all.js的调试版本，调试时使用。 |
| ext-core.js | 亦是Ext的核心库，使用时必须引入的文件！ |
| ext-core-debug.js | 是ext-core.js的调试版本。 |
| INCLUDE_ORDER.txt | 此文件说明在使用时引用底层库文件(js)的顺序。 |
| LICENSE.txt | 这个不用多说了，是Ext的使用许可文件。 |
1.2 Ext开发环境的准备：
日常我们项目是基于java、php环境开发的，我把Ext放在了我已经配置好的Apache服务器上了，建立了一个虚拟目录专门供学习使用，关于如何安装和配置Apache服务器就不在我本次的学习范围之内了，朋友们如果还不太了解，可以在网上搜索一下相关资料。
我配置好的访问地址是：http://localhost:81/ext/examples/samples.html
这样我就可以查看Ext自带的API和示例了。
1.3 Ext开发辅助工具的准备：
Firefox + Firebug + Spket
虽然目前IE占据70%以上的市场份额，但是Firefox和Firebug的组合更让我们在调试javascript时提供的便利赞不绝口，因此学习前端脚本开发还是推荐这个组合的，但是我们不能忘了IE还是老大，最终我们还是需要编写健壮的跨浏览器的javascript。
关于这部分的安装和使用我在这里也就不再重复，对于开发前端脚本的朋友一定不会陌生，如果是初出茅庐，没关系，搜索一下网上的资料吧，很快搞定。下面附上下载地址。
但是在这里得提一下Spket这个东西，它可以基于Eclipse3.2以上版本的插件安装，也就是说像以往安装Eclipse插件那样轻松安装。还可以作为一个独立的IDE使用。不过，独立IDE需要运行在JDK1.5版以上。下载文件为spket-1.6.*.jar，安装步骤如下：
(1) 打开cmd控制台。（开始->运行->输入cmd回车）
(2) 命令进入spket-1.6.*.jar文件所在目录下输入java -jar spket-1.6.*.jar
(3) 回车后便可看到安装界面，这里会选择是作为Eclipse的插件还是独立作为富客户端运行，默认选择前者。
(4) 之后是一步一步往下安装即可，安装成功后会看到一个和EclipseIDE非常相似的界面，使用方式也基本相同。
Firefox: http://www.mozillaonline.com/
Firebug: https://addons.mozilla.org/zh-CN/firefox/addon/1843
Spket: http://www.spket.com/
1.4 体会Ext精彩由此开始：“Hello World”
第一个Ext程序，当然不能免俗的……，我们叫它“Hello World”。
这个程序的顺利执行也将意味着我们针对Ext的环境搭建和开发准备工作顺利完成啦！
第一步：我们在examples目录中新建一个helloworld目录（为了方便学习我就和Ext提供的例子放在一起了），在新建目录helloworld下新建一个helloworld.html文件，代码如下：
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/resources/css/ext-all.css" />
<script type="text/javascript" src="http://www.cnblogs.com/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/ext-all.js"></script>
<script type="text/javascript" src="../examples.js"></script>
<script language="javascript">
Ext.onReady(function(){
Ext.MessageBox.alert('helloworld', 'Hello World.');
});
</script>
保存文件，在Firefox中打开http://localhost:81/ext/examples/helloworld/helloworld.html
出现上面的提示窗口，我们的第一步工作就顺利结束啦～
1.5 究竟一个应用Ext中哪些文件是必需的？
首先，文档、示例和源代码文件可以休息啦！这些是你需要学习和查阅的时候为你服务就可以了。
那么，一个应用必需内容至少应包括：
1. ext-all.js
2. adapter/ext/ext-base.js
3. build/locale/ext-lang-zh_CN.js 这个是简体中文国际化资源文件
4. 整个resources目录
注意的是，引用这些文件时注意javascript脚本的顺序。一般是：
先引入样式/resources/css/ext-all.css
接着ext-base.js
再是ext-all.js
最后是ext-lang-zh_CN.js
好了，到这里等于是学习的基本条件具备了。看着helloworld程序的成功运行，再次感到Ext界面的绚丽和功能的强大！
跟着《深入浅出ExtJS》的思路，配合着网上资源的帮助，从此刻开始正式揭开Ext神秘面纱……
