1.3 如何学习Ext JS

如何学习Ext JS呢？所有刚接触Ext JS的读者都会询问该问题。学习Ext JS的最好办法就是独立去实现一个应用系统，该系统的相关功能可以根据Ext JS包中的自带实例进行修改。在实现的过程中肯定会碰到这样那样的问题，这时可以通过论坛或其他方式来解决。

在学习或开发之前，我们得先知道在哪里下载Ext JS、如何搭建开发环境及与其相关的论坛。

1.3.1 获取源码并部署

我们可以从Ext JS官方网站下载其最新的版本，目前的版本号是Ext JS 3.0，其网址为：http://www.extjs.com/products/extjs/download.php。下载的压缩包中包括源码、实例和文档等。为了能运行其文档或实例，我们要将其解压部署在如IIS、Tomcat容器中。

只要把下载的Ext JS 3.0解压之后的根目录文件夹直接复制到对应容器中，再重启该容器，接下来就可以通过http://localhost:8080/ext-3.0/docs/index.html访问到其文档，或通过http://localhost:8080/ext-3.0/examples/samples.html访问其实例，如图1.1所示。

1.3.2 开发工具的智能提示

“工欲善其事，必先利其器”，在使用和开发Ext JS之前，我们也要找到一个好的开发工具。Ext JS有众多的类和函数，有时很难记住每个类或函数的拼写，如果开发工具能提供智能提示，将给开发者提供巨大方便。

Spket是开发Ext JS的利器，它支持Ext JS的智能提示。它分别为Eclipse 3.2、Visual Studio 2008和Dreamweaver CS3等开发工具提供相对应的Ext JS智能提示的插件。在Eclipse中还支持链接跳转方式的代码查看，这对于学习和分析Ext JS源码有着极大的帮助。

图1.1 Ext JS自带实例演示

Visual Studio 2008本身就支持JS的智能提示，只要在需要提示的JS文件中引入依赖的类库即可，如/// <reference path= “vswd-ext_2.2.js” />。但是直接引用Ext JS中的文件有时候会出现一些问题，于是Spket专门提供vswd-ext_2.2.js（目前尚未提供vswd-ext_3.0.js，该文件可以用来智能提示ext_3.0）来代替Ext JS源码进行智能提示，如图1.2所示，该文件可以从http://www.spket.com/ext-intellicense-visual-studio.html下载。

图1.2 Visual Studio 2008智能提示

Dreamweaver开发工具的用户可以使用SpketDW （Dreamweaver 2004）和SpketDWCS （Dreamweaver CS3）插件来进行智能提示。两者都是Spket团队开发的，因此同样精确和出色。另外，Dreamweaver插件的一大特点是能很好地支持配置项的代码提示。

我们可以到http://www.spket.com/dreamweaver-extension.html下载相对应的插件。对于Dreamweaver CS3，在安装SpketDWCS插件之前，还需要先安装Adobe Extension Manager CS3 1.8的插件，其提示如图1.3所示。

图1.3 Dreamweaver智能提示

Spket IDE是目前支持Ext JS的最为出色的IDE。它采用.jsb项目文件并将继承于基类和所有文档的内容嵌入到生成代码提示的Script文档中。下面介绍它的安装步骤。

step 1 在Eclipse菜单中选择“Help→Software Updates→Find and Install...→Search for new features to install→New remote site...”命令，这时会弹出窗口，在其中的“Name”文本框中输入“Spket”，在“Url”文本框中输入“http://www.spket.com/update/”。单击“OK”按钮，接下来按提示操作就可以完成安装，最后重启Eclipse。

step 2 在Eclipse菜单中选择“Window→Preferences→Spket→JavaScript Profiles→New”命令，弹出窗口，输入名字“Ext JS”，单击“OK”按钮。这时Ext JS会出现在主窗口中，选择“Ext JS”并单击“Add Library”按钮，弹出一个小窗口，在该窗口中的下拉条中选择“Ext JS”选项，为Ext JS指明其属于哪一种类型。接下来在主窗口中选择“Ext JS”并单击“Add File”按钮，然后在“./ext-3.0/source”目录中选择“ext.jsb”文件。

step 3 设置新的Ext JS Profile，选中它并单击“JavaScript Profiles”对话框右边的“Default”按钮。

step 4 打开JS的方式为选择“Window→Preferences→General→Editors→File...”命令，选择“JS”为“Spket JavaScript Editor(default)”。现在就可以看到其智能提示的效果，如图1.4所示。

图1.4 Eclipse智能提示

1.3.3 文档和实例的学习

学习和使用Ext JS，有两样东西是必不可少的：一是其文档，二是其自带实例。读者如果想要实现什么功能，可以先到实例中去查看一下，一般都会找到自己要实现的效果。对于实例源码，通常需要进行一些修改，然后将其应用到系统中去。在分析实例源码时，我们就需要用到其文档。

Ext JS文档把所有公开类的使用方法、属性及事件等都进行了详细说明，使用时唯一困难的地方就是它是英文文档。Ext JS文档网页分成两部分，如图1.5所示。

图1.5 Ext JS文档说明

其中左边是所有类导航，可以进行筛选过滤查询。只要单击左边导航树上的节点，右边就会出现相对应的类说明。如图1.5所示的Ext.Panel类，右边说明包括5个部分：第1部分是对该类进行概述性说明。接下来的4部分是对Ext JS类的4大功能一一进行说明。在使用某类时，我们一般都要通过new来构建该类，其中传入的参数是配置对象，配置对象中包括众多配置项，这些都一一列出并进行了说明，如图1.6所示。

图1.6 配置项

配置项可以继承父类，如Ext.Panel类的activeItem配置项就继承于Ext.Container类。同时，对每个配置项还指定了类型，其使用方法如下：

mypanel=new Ext.Panel({activeItem:1,allowDomMove:true });

接下来文档对类的属性和方法进行了说明，在使用时可以根据需求调用相关的方法，最后一部分是对事件进行说明，如图1.7所示。

图1.7 事件的说明

当类运行到某一个时刻需要自定义扩展处理时，就要使用事件来定制回调函数。对于初学者来说，文档中的事件有点难于理解。我们通过一个例子来说明，图1.7中有一个事件叫“add”，如果我们需要在向Panel增加组件之后弹出通知信息，可以用如下代码实现：

mypanel.on("add",function(t,c,i){alert("add panel");});

当mypanel实例运行到“add”时，就会调用自定义的回调函数。回调函数的参数是系统自动传入的。不同的事件会有不同的参数，该参数在文档中进行了说明。

1.3.4 学习论坛

在学习和使用Ext JS的过程中，可能会碰到各种各样的问题。有的时候，这些问题不能自行解决，需要求助于他人。Ext JS应用广泛，在网络上有很多讨论相关技术的论坛。

Ext JS官方论坛可以说是最权威的Ext JS技术论坛，它是Ext JS用户交流的窗口。该论坛不但提供众多的Ext JS扩展组件，还提供了Ext JS新的功能需求、求助等众多版块，问题基本能在这里得到解决。其网址是http://www.extjs.com/forum/。

国内也有一些论坛，有大量的开发者在其中讨论Ext JS，如“一起Ext”等网站。