本文介绍了一位开发者从初次接触Ext2.0到决定深入学习的过程，并分享了如何在Aptana中配置Ext2.0以获得更好的代码提示与自动完成功能的经验。
Ext1.1的时候就曾经倒腾过几天，虽然当时对它的UI也非常着迷，但是因为种种原因没有继续下去，比如说没有很好的IDE，网络的评论也有很多说内存溢出的问题比较严重，感觉Ext在实际的项目中运用的可能性不大，所以就打住了。现在Ext2.0正式版已经发布了好一阵了，网上一片叫好，blogjava也有好几个人都在写关于Ext的文章，索性就下载了Ext2.0的压缩包，看了下随包附带的examples，看完就一个感觉，原来web的UI也可以做成这样啊？下定决心，必须要学一把。
要想学习一样东西，好的工具是必不可少的，google，baidu，在各大论坛翻了个遍，环境的搭建讨论也不是很多，就连中文的教程都没多少，而且各种做法或者是不支持Ext2.0，或者是比较麻烦，不适合刚刚入门新手。俺就想找一个简单的，但是对Ext2.0支持还不错的环境，至少也是最基本的一个有个自动完成和代码提示的功能。而网上讨论的比较多的就是JSEclipse，Aptana，Skpet，本人是一个不落的全部download，安装，结果发现没有一个是比较满意的（或许本人没有找到正确的方法，希望知道的人告知），网上有个帖子说说法大概有以下几种：
1.安装Eclipse的JSEclipse插件，听说打开.js文件之后JSEclipse菜单下会有一个Add Library的，我按照说的安装了也出来Add Library菜单项了，但是添加之后就是不好使，没出任何提示
2. Aptana Ajax库插件---EXT2.0 见后面很多人说不好用，我也就没试。估计好使的可能性不太大。
3. http://blog.youkuaiyun.com/xujiaqiang/archive/2007/05/25/1625969.aspx 感觉说的挺麻烦的，忽略
4.Extjs官方有一篇E文的文章介绍了怎么使用Aptana的： Building a desktop application with Ext, AIR, Aptana and Red Bull ，有兴趣的可以去看看，不过是E文的。
下面说夏我自己的方法。工具就是Aptana，官方地址： http://www.aptana.com，最新的好像是1.01，而还把名字改成了AptanaStudio。
1.下载之后安装，安装有两种方式：一种是当成独立的IDE，另外一种是作为Eclipse的插件安装，我选择了前者，原因后面说，启动之后选Help--About如下图：
2. 安装好之后新建project，（我建的工程目录如下，目录结构不一定一样，看你自己的喜欢）你会发现原来Aptana原来是支持Ext的，但是看清楚了，是Ext1.1，虽然都是Ext，但是2.0在1.1的基础上变更的比较的多，所以别报什么希望了。
3.把下载的Ext2.0.zip里面的ext-all.js，adapter\ext\ext-base.js以及build\locale\ext-lang-zh_CN.js拷到上图的js文件夹下（ext-lang-zh_CN.js不是必须的，不拷也可以），然后把resources下的images文件夹整个都拷贝到上图的WebContent下的resources下，然后把resources\css里的ext-all.css拷贝到上图的css文件夹下（当然也可以偷懒直接把ext2.0\resources直接拷贝到WebContent下）。
4.新建html和同名的js文件，位置任意的，不一定非要和我的相同，凭个人喜好。但是一定要保证在html里面引用的时候相对位置正确就可以了。以我上图的目录为例，html里相应的脚本引用如下图：
5.点击左上的Project选项卡旁边的Code Assist Profiles看见了什么？是不像这样的？
这就是我们的关键了。Aptana能够自己找到页面引用的js文件，如果你看见上图中所有的js文件前面都是像layout.js前面的红色的E那就是文件引用的相对路径不正确。
此时在当前的html里面写脚本aptana就能找到引用的js文件里的变量，方法。说到这里不用多解释大家应该都明白了吧。就是在当前的html里写好脚本，借助aptana的自动完成和代码提示功能，然后把所有的js再拷贝到对应独立的js文件里，这样就保证了一个html文件一个同名的js文件的Ext风格。其实你不单独的写一个js文件也是可以的，单用个js文件只是为了代码便于管理。
看看效果吧：
要想学习一样东西，好的工具是必不可少的，google，baidu，在各大论坛翻了个遍，环境的搭建讨论也不是很多，就连中文的教程都没多少，而且各种做法或者是不支持Ext2.0，或者是比较麻烦，不适合刚刚入门新手。俺就想找一个简单的，但是对Ext2.0支持还不错的环境，至少也是最基本的一个有个自动完成和代码提示的功能。而网上讨论的比较多的就是JSEclipse，Aptana，Skpet，本人是一个不落的全部download，安装，结果发现没有一个是比较满意的（或许本人没有找到正确的方法，希望知道的人告知），网上有个帖子说说法大概有以下几种：
1.安装Eclipse的JSEclipse插件，听说打开.js文件之后JSEclipse菜单下会有一个Add Library的，我按照说的安装了也出来Add Library菜单项了，但是添加之后就是不好使，没出任何提示
2. Aptana Ajax库插件---EXT2.0 见后面很多人说不好用，我也就没试。估计好使的可能性不太大。
3. http://blog.youkuaiyun.com/xujiaqiang/archive/2007/05/25/1625969.aspx 感觉说的挺麻烦的，忽略
4.Extjs官方有一篇E文的文章介绍了怎么使用Aptana的： Building a desktop application with Ext, AIR, Aptana and Red Bull ，有兴趣的可以去看看，不过是E文的。
下面说夏我自己的方法。工具就是Aptana，官方地址： http://www.aptana.com，最新的好像是1.01，而还把名字改成了AptanaStudio。
1.下载之后安装，安装有两种方式：一种是当成独立的IDE，另外一种是作为Eclipse的插件安装，我选择了前者，原因后面说，启动之后选Help--About如下图：
2. 安装好之后新建project，（我建的工程目录如下，目录结构不一定一样，看你自己的喜欢）你会发现原来Aptana原来是支持Ext的，但是看清楚了，是Ext1.1，虽然都是Ext，但是2.0在1.1的基础上变更的比较的多，所以别报什么希望了。
3.把下载的Ext2.0.zip里面的ext-all.js，adapter\ext\ext-base.js以及build\locale\ext-lang-zh_CN.js拷到上图的js文件夹下（ext-lang-zh_CN.js不是必须的，不拷也可以），然后把resources下的images文件夹整个都拷贝到上图的WebContent下的resources下，然后把resources\css里的ext-all.css拷贝到上图的css文件夹下（当然也可以偷懒直接把ext2.0\resources直接拷贝到WebContent下）。
4.新建html和同名的js文件，位置任意的，不一定非要和我的相同，凭个人喜好。但是一定要保证在html里面引用的时候相对位置正确就可以了。以我上图的目录为例，html里相应的脚本引用如下图：
5.点击左上的Project选项卡旁边的Code Assist Profiles看见了什么？是不像这样的？
这就是我们的关键了。Aptana能够自己找到页面引用的js文件，如果你看见上图中所有的js文件前面都是像layout.js前面的红色的E那就是文件引用的相对路径不正确。
此时在当前的html里面写脚本aptana就能找到引用的js文件里的变量，方法。说到这里不用多解释大家应该都明白了吧。就是在当前的html里写好脚本，借助aptana的自动完成和代码提示功能，然后把所有的js再拷贝到对应独立的js文件里，这样就保证了一个html文件一个同名的js文件的Ext风格。其实你不单独的写一个js文件也是可以的，单用个js文件只是为了代码便于管理。
看看效果吧：
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
