我与EXTJS有个约会

 

我与EXTJS有个约会

 

Author：yongtree

说在前头

         为什么学习EXTJS？

         自己以前对JS相当无知，认为这就是个鸡肋——“食之无味，弃之可惜”。参加工作后，进入到实际的开发中才发现，JS还是一个非常有用的东东，有些前台的功能单靠Java这样的后台程序语言是不能搞定的，于是就慢慢的使用JS，并同时开始了AJAX之旅。使用EXTJS也就源于最近一个项目的开发，由于以往开发系统都是以实现功能为主，很少关注用户的体验，这不仅让用户怨声载道，也让我们自己感到审美疲劳。在以用户为中心的软件2.0时代，良好的用户体验是我们不得不正视的问题，于是就有了和EXTJS的约会。EXTJS也的确是一个很强大的东东，首先是那华丽的外表给我们带来的视觉冲击，让我毫不犹豫的就爱上她。而它的编写风格也和JAVA有异曲同工之妙，让我这个java程序员不会感到很陌生。由于公司要对OA改版，为了在用户体验上比以前有个很大的变化，我们决定使用EXTJS。

         为什么写EXTJS的初级的、简单的教程？

         在学习、开发的过程中，存在着很多的问题，也有很多的收获，写这个教程也作为对EXTJS学习开发的一个总结，以便在以后的开发中能够不再为查询资料而烦恼，同时也可让其他成员能够快速的学习。EXTJS进入中国时间还不是太长，介绍EXTJS的书籍几乎没有，有的还不是发行版本。网上中文资料非常零散，有比较综合的教程，还不全部免费公开，着实有点不爽。自己在学习和开发的过程中，总结了EXTJS开发的一些心得，当然也有还未解决的问题。这个教程也许非常的简陋，只是能给初学者一个快速学习的帮手，同时也让大家一起参与进来，共同讨论和解决开发中带来的实际问题，共享自己的学习成果，共同进步。我希望这个教程不是某个人的教程，而是致力于开源、共享人士一起努力，共同创作的结晶。

 

第一章：约会之前。做点准备工作

         1.1 获得EXTJS

         我们可以在EXTJS的官方网站上（）免费获取。现在最新的版本为EXTJS2.1（如下图所示），在我开发的系统中我们已经升级了EXTJS2.1，该教程也使用2.1版本。

下载Ext JS 2.1 SDK解压后如下图所示：

adapter：负责将里面提供第三方底层库（包括Ext 自带的底层库）映射为Ext 所支持

的底层库。

build： 压缩后的ext 全部源码(里面分类存放)。

docs： API 帮助文档。

exmaples：提供使用ExtJs 技术做出的小实例。

resources：Ext UI 资源文件目录，如CSS、图片文件都存放在这里面。

source： 无压缩Ext 全部的源码(里面分类存放) 遵从Lesser GNU （LGPL） 开源的

协议。

Ext-all.js：压缩后的Ext 全部源码。

ext-all-debug.js：无压缩的Ext 全部的源码(用于调试)。

ext-core.js：压缩后的Ext 的核心组件，包括sources/core 下的所有类。

ext-core-debug.js：无压缩Ext 的核心组件，包括sources/core 下的所有类。

 

同时你也可以下载本地安装的API，这个API依赖于Adobe公司的AIR，可以到Adobe官方网站自行下载。

 

1.2 怎样使用EXTJS

         在我们自己的页面中我们需要导入一下几个资源文件，这几个文件可以说在我们系统开发中是必不可少的。

ext-all.css:EXTJS各组件的所有css样式定义都放在该文件中。

ext-base.js:EXTJS框架基础库。当然你也可以根据需要采用其他的框架基础库。

ext-all.js:EXTJS压缩后的核心库。

ext-all-debug.js:EXTJS未压缩的核心库，用于调试使用。

ext-lang-zh-CN.js:EXTJS提供的中文语言包。

解惑：我们在开发的时候，有时候会经常报Ext未定义的错误。不能加载EXTJS核心库，这是因为这几个js的加载有一定的顺序。ext-base.js一定要排在最前面。

 

1.3 开发、调试EXTJS的工具

         “工欲善其事，必先利其器”，一个好的工具不仅能提高我们的开发效率，同时也能让我们开发出更加完善的系统。

        

Ext 2.0的API包含许多的方法（函数）、属性和配置项，涵盖的面非常大，要全部列出几乎是不可能的。虽然API文档是童叟无欺精心打造的，但实际开发中，若果能够像其它语言Java和C#那样地支持JavaScript代码提示，那就更好啦。可喜的是，有若干的开发环境（IDE）和插件能够支持－－并且是直接支持Ext 2.0。

Aptana Studio
    一谈到JavaScript的开发工具，就不得不提了。就我实际工作来说，每天都用它来完成Adobe AIR的工作。但是Aptana当前捆绑的Ext的版本有些旧（1.1的），下面就介绍一个的安装方法，让Aptana支持到2.0（由Markus Schmidleitner提供，用起来还不错）：

1.下载并安装Aptana Studio;
2.打开你的Aptana程序目录（我这儿是C:\Aptana），复制jar格式的文件到plugins目录；
3.重启Aptana；
4.进入Window -> Preferences -> Aptana -> Editors -> JavaScript -> Code Assist选择Ext 2.0（或要反选Ext.1.1）。

Aptana Studio with Ext 2.0 code assist

 

Spket Eclipse插件与IDE
    是目前支持Ext 2.0最为出色的IDE。它采用.jsb project file 文件并将继承于基类和所有文档的内容嵌入到生成代码提示的Script doc中。
    由于Spket只是一个单纯的编辑器，没有其它格式的支持（如CSS），所以我的做法是用它的Eclipse插件形式，安装到Aptana。安装办法如下：

    1.下载安装Aptana Studio（包含有Eclipse）；
    2.启动Aptana并打开程序菜单到：Help → Software Updates → Find and Install… → Search for new features to install → New remote site…
    3.名称: “Spket”，地址URL是
    4.重启Aptana；
    5.观看一下这个SketIDE的，看看Ext代码提示的功能有多省事（你可以修改/src/ext.jsb 保持最新版的Ext），基本步骤如下：

1. Window → Preferences → Spket → JavaScript Profiles → New ；
2. 输入“ExtJS”点击OK；
3. 选择“ExtJS” 并点击“Add Library”然后在下拉条中选取“ExtJS”；
4. 选择 “ExtJS”并点击“Add File”，然后在你的./ext-2.x/source目录中选取“ext.jsb” 文件；
5. 设置新的ExtJS Profile，选中并点击“JavaScript Profiles” 对话框右手边的“Defalut”按钮；
6. 重启Aptana；
7. 创建新的JS文件并输入： Ext这样就可设置Ext Code代码自动完成的功能。

    由于你是在Aptana中安装插件的，Aptana还是你默认的JS编辑器，所以要试用Spket，你要在那个文件上选中“Open with”－> Spket JavaScript Editor 。

Spket in Aptana with full documentation and code assist

 

Komodo Edit

 为众多格式文件提供支持，包括Perl、PHP、Python、Ruby和Tcl。亦支持浏览器方面的代码包括有JavaScript、CSS、HTML和XML。Windows、Mac Os和Linux平台都可用。
    安装Ext支持下的Komodo：

    1.下载和安装Komodo Edit；
    2.下载；
   

Ext 2.0的API包含许多的方法（函数）、属性和配置项，涵盖的面非常大，要全部列出几乎是不可能的。虽然API文档是童叟无欺精心打造的，但实际开发中，若果能够像其它语言Java和C#那样地支持JavaScript代码提示，那就更好啦。可喜的是，有若干的开发环境（IDE）和插件能够支持－－并且是直接支持Ext 2.0。

Aptana Studio
    一谈到JavaScript的开发工具，就不得不提了。就我实际工作来说，每天都用它来完成Adobe AIR的工作。但是Aptana当前捆绑的Ext的版本有些旧（1.1的），下面就介绍一个的安装方法，让Aptana支持到2.0（由Markus Schmidleitner提供，用起来还不错）：

1.下载并安装Aptana Studio;
2.打开你的Aptana程序目录（我这儿是C:\Aptana），复制jar格式的文件到plugins目录；
3.重启Aptana；
4.进入Window -> Preferences -> Aptana -> Editors -> JavaScript -> Code Assist选择Ext 2.0（或要反选Ext.1.1）。

Aptana Studio with Ext 2.0 code assist

 

Spket Eclipse插件与IDE
    是目前支持Ext 2.0最为出色的IDE。 它采用.jsb project file 文件并将继承于基类和所有文档的内容嵌入到生成代码提示的Script doc中。
    由于Spket只是一个单纯的编辑器，没有其它格式的支持（如CSS），所以我的做法是用它的Eclipse插件形式，安装到Aptana。安装办法如下：

    1.下载安装Aptana Studio（包含有Eclipse）；
    2.启动Aptana并打开程序菜单到：Help → Software Updates → Find and Install… → Search for new features to install → New remote site…
    3.名称: “Spket”，地址URL是
    4.重启Aptana；
    5.观看一下这个SketIDE的，看看Ext代码提示的功能有多省事（你可以修改/src/ext.jsb 保持最新版的Ext），基本步骤如下：

1. Window → Preferences → Spket → JavaScript Profiles → New ；
2. 输入“ExtJS”点击OK；
3. 选择“ExtJS” 并点击“Add Library”然后在下拉条中选取“ExtJS”；
4. 选择 “ExtJS”并点击“Add File”，然后在你的./ext-2.x/source目录中选取“ext.jsb” 文件；
5. 设置新的ExtJS Profile，选中并点击“JavaScript Profiles” 对话框右手边的“Defalut”按钮；
6. 重启Aptana；
7. 创建新的JS文件并输入： Ext这样就可设置Ext Code代码自动完成的功能。

    由于你是在Aptana中安装插件的，Aptana还是你默认的JS编辑器，所以要试用Spket，你要在那个文件上选中“Open with”－> Spket JavaScript Editor 。

Spket in Aptana with full documentation and code assist

 

Komodo Edit

  为众多格式文件提供支持，包括Perl、PHP、Python、Ruby和Tcl。亦支持浏览器方面的代码包括有JavaScript、CSS、HTML和XML。Windows、Mac Os和Linux平台都可用。
    安装Ext支持下的Komodo：

    1.下载和安装Komodo Edit；
    2.下载；
    3.进入Edit -> Preferences -> Code Intelligence 并选择位于“API Catalog”下方的按钮“Add an API catalog” ；
    4.选择刚才下载的ExtJS API catalog CIX 。

Komodo with Ext JS code intelligence

Dreamweaver
    对于Dreamweaver的用户，有两种可用的插件(Dreamweaver 2004或新版)和(Dreamweaver CS3)。两者都是Spket团队开发的(刚才提及的)，因此也同样精确和出色。另外Dreamweaver插件的一大特点是很好地支持配置项的代码提示。

 

Members code assist

 

Config option code assist

   要下载和安装，请浏览他们的。

 

其它的IDE
    还有其它的IDE,像由社区发起的正在工作着的IntelliJ和。

总结
    当工作中需要到Ext 2.0，的确有一些工具能辅助你提升工作效率，这真的要比较一番（Check them out、check out、checkout...）。如果你也发现有其它更好的工具，不妨雁过留声，与我们分享。

该表格框中内容原文：

感谢作者sp42的分享。

 

作为Java程序员，我日常的开发都是在Eclipse的平台下，而且对于前台展现的东西也不是很懂，所以个人爱好还是在Eclipse下即可以开发前端表现也可以编写后台代码。上面介绍的方法对我就不太适合，它更像是美工用的工具。值得我们高兴得是，上面介绍的工具中有的已经存在Eclipse的插件。比如Aptana Studio，Spket IDE1.6。具体安装与普通的Eclipse插件相同（建议通过link的方式安装插件，具体方法网上有大量的介绍）。配置和上面表格中的介绍相似。同时，再介绍一个Eclipse下的一个插件JSEclipe，想必大家对这个也不陌生。原版的JSEclipse对EXTJS没有支持功能，但是通过网上下载Ext_JSEclipse这个插件包，可以让JSEclipse支持EXTJS。具体的配置和上面介绍的Spket的安装配置相似，只不过Spket使用的是ext.jsb文件，而JSEclipse由一堆xml文件组成。

解惑：用JSEclipse打开JS文件，任务栏上会出现【JSEclipse】点击【Add Library】后，将文件目录打开倒XML存放的地方，但是你会发现根本不显示XML文件，因为下面的文件类型为JSEclipse Libraries。这是不用担心，直接在文件名中写上ext-all.js，然后确认（如图一），再刷新【Refresh code completion library】（如图二），这样做的目的是为了在你的工作空间里出现一个user_library文件夹（如图三），然后把你下载的插件包里所有的XML文件拷到这个目录下。

图一

图二

图三

重启MyEclipse后，编辑EXTJS则会出现相应的提示功能。如下图:

用了这么多的篇幅介绍开发工具，目的是为了能够很好的利用这样的工具提高我们开发的效率。而综合这些工具，我个人更喜欢Aptana，感觉它在编辑JS方面是非常强大的。当然我们可以联合应用，比如JSEclipse的模板功能，Spket对EXTJS的提示功能。

 

顺便说一下调试JS的工具，这方面的工具不是太多，个人感觉火狐的firebug在JS调试方面还是非常强大的，当然这个插件不仅仅是JS调试工具，在页面级别的调试都非常的强大。建议使用firebug进行调试。Firebug不是firefox自带的，需要用户自行下载安装。

下载地址：

安装后的调试界面如下图：