在ExtJS的blog有这样一文:IDEs, plugins and tools for Ext JS 2.0 ,相信不少人对Aptana Studio和Spket IDE的表现一定非常憧憬。文章中也提及了IntelliJ IDEA,但是并没有就相关的特性进行说明,这里大家可能会问,IDEA也就是向普通js那样支持Ext。确实是这样,但是Ext也是普通的Javascript写成的,而且也遵循规范,在下面文章中,我们不需要任何Ext的IDEA插件,就可以实现很多功能。在进行讲解之前,我们需要做一些准备。IDEA全面支持jsdoc,但是你下载的Ext包中都将这些注释去掉啦,如果你使用这样版本的js,那么想在IDEA下查看方法的说明,基本不可能的,所以我们要使用一个全新的debug版本的js文件,这个版本包含源码的各种注释。Ext SVN Builder生成的debug文件并不包含注释信息,我们只需要对其进行微小处理,就可以包含文档注释,你可以下载该文件,包含ext-base-debug.js和ext-all-debug.js文件,包含了全部源码注释,版本为2.0.2,虽然文件大了点,但是对开发帮助很大。extjs-2.0.2-debug.zip 如果你想使用修改后的builder.jar文件可以给我留mail。
在开发中,我们只需要使用带有注释的js文件,发布的时候你可以选择压缩版本的。回到IDEA中,在Ext各个组件的方法上按一下Ctrl+Q,你会发现属性和函数的注释都有啦,按下Ctrl+Shift+I就可以看到实现的代码。Spket中关于Ext的文档提示这里全部实现啦。
接下来就是代码提示啦,IDEA的代码提示有两者,Basic和Smart,如在调用Ext.Panel变量的方法时,如果你使用Ctrl+Space,那么会出现很多候选项,有些你可能觉得不靠谱,居然把Button的方法都提示给你,如果你按下Ctrl+Shift+Space,情形就不一样啦,完全都是Panel及其父类的方法,你可以快速选择需要方法或属性。在函数参数输入框内,你按下Ctrl+P会进行各种参数描述提示。
接下来就是关于IDEA对HTML中的ID提示,在IDEA中,HTML的ID是被索引的,这样ID就可以被提示。这样我们推荐你可以将Ext的组件和实际的Div进行关联,可以考虑使用相同的id,因为Component和Element是分开的,不会有什么问题,这样你在Ext.getCmp()和Ext.get()都可以实现代码提示,并且能进行快速定位,同时你查找该id的相关引用也非常方便(Ctrl+Alt+F7)。
IDEA还提供一个比较好的特性就是支持代码导航。如果你想查阅Ext.get的实现,你只要按下Ctrl+Shift+Alt+N,然后输入Ext.get就可以定位该方法。在下来的列表中,你按下Ctrl+Q,同样可以进行文档查看。
IDEA提供的这些通用特性完全对Ext有效,当然Ext还有一些特殊的地方,如Config opitions, json数据结构,config opitions已经在文档中以@config标识出来,下一步就是和相关的json数据结构进行关联。还有就是对CSS的引用,这个在IDEA中也比较容易实现,在后续的开发中会提供这些支持。
最后说一句,IDEA 8.0提供了Javascript Debuger,你调试Javascript应用也非常方便。当然IDEA不只是在Javascript方面优秀,其他如CSS,HTML等方面,功能也非常强大。如果你的Ext代码是和JSP结合的,那么IDEA的功能就更能体现出来啦。可能在某些方面,某些IDE功能很强,但是在处理混合语言时,IDEA还是无人能及的。