`

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.csdn.net/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文件只是为了代码便于管理。
看看效果吧:

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics