JAVAide-在IntelliJ IDEA下开发ExtJS (jsdebug工具)

JAVA开发工具 - 在IntelliJ IDEA下开发ExtJS应用指南

在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还是无人能及的。