Eclipse与ExtJS 4.1.1自动代码提示

向右看齐 2022-08-06 10:25 145阅读 0赞

以下转载自：http://blog.sina.com.cn/s/blog\_87119ac601012g5t.html

先去[http://www.agpad.com/downloads/spket-1.6.23.jar][http_www.agpad.com_downloads_spket-1.6.23.jar]下载最新版的spket的安装包

假设是放在d盘

同样假设你的Myeclipse是最新版的10.5的

开始\->cmd->d:->java –jar spket-1.6.23.jar

就会打开一个安装界面

[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1] 
 
[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 1]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 1] 
 
[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 2]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 2] 
 
[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 3]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 3] 
 
[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 4]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 4] 
 
[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 5] ][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 5]

如果你现在的myeclipse是启动的，那么将它关闭，重启，以便对其初始化

刚启动的时候有点慢，我的等了有3分钟

[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 6]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 6] 
 
[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 7] ][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 7] 
 
[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 8]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 8] 
 
[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 9]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 9] 
 
[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 10]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 10]

这是一种方式，还有一种方式

[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 11]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 11]

选择MyEclipse Configuration Center

[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 12]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 12] 
 
[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 13]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 13] 
 
[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 14]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 14]

在弹出窗里，选择Add from local Folder,在本地选择你解压后的spket文件夹，选到spket.1.6.23这一层即可，如下图：

[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 15]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 15]

然后点击ok.

[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 16]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 16]

只选择前两项即可，右击spket IDE选择add profile,t同理选择Spket Text Editor.当这两项添加完以后会在pending changes 选项里提示有2个项目需要change.

[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 17]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 17]

那么点击运行即可

1.重启Myeclipse，在菜单栏进行Window > Preferences. 会在右侧出现spket的选项

2.选择 Spket > JavaScript Profile，会出现如下界面

[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 18]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 18]

6.点击new，输入名称Ext4作为新文件的名字

7.选中Ext4,点击右侧的按钮add library在下拉列表里选中ExtJs

8.选中ExtJs，点击右侧按钮add file,在下载的ExtJs包里的build文件夹中找到sdk.jsb3导入

9.选中Ext4，点击右侧的default按钮，接下来点击ok,那么spket就配置成功了，怎么样很简单吧？

[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 19]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 19]

接下来在项目里新建一个js文件，右击js文件，选择open with > spket javascript Editor，在js里按alt+/,试试看吧！

注意：如果您的open with 下没有spket javascript Editor，那么你需要去Window > Preferences下的窗口给\*.js添加默认编辑器spket javascript Editor。如图

[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 20]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 20]

新建一个js文件

[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 21]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 21]

右键Open With->Spket JavaScript Editor

然后，按 alt+/ 试一下，是不是已经出提示了？

[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 22]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 22]

好了，不管用哪种方法，我们终于都弄完了，是不是大功告成了呢?

如果你写Ext.onReady都不出提示，肿么个情况?

别着急

假设你用的是Ext4.1.1，那么你

[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 23]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 23]

仔细看看会发现里面很多的错误，(真心鄙视一下Ext的开发人员，都不知道他们肿么心思的)

比如说

[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 24]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 24]

这个文件正是我们需要智能提示的清单文件，这个错了，能出提示才见鬼呢

在这里我们就不讲如何改jsb3文件了，我直接发给大家一个，你们注意将他放在从官网下载下来的，解压出来的ext的根目录，而不是我一开始说的那个build文件夹里，注意

或者，直接去 [http://dl.vmall.com/c0v7pv4fvi][http_dl.vmall.com_c0v7pv4fvi] ，下载我已经改好了jsb3文件的ext4.1.1的官方包，解压到本地路径下

把ext的提示文件换成这个sdk.jsb3文件，所有勾都可以打上。然后打开一个新的JS文件，输入以下代码（为了试验代码是否有自动提示，建议手打）

输入E按一下alt+/就会出现Ext了

你会发现Ext.onReady 和 Ext.create 都有提示了。而 Ext.data.Model 你可以先输入再加引号，那样也有提示了，顺带一提，属性名 field 和 extend 也是有提示的。如果你不确定自己输入的属性名对不对，可以在加了引号之后按住ctrl键鼠标移到最后一级名字那里看看（例如Ext.data.Model中的Model）看是不是变色并且有下划线了，如果有就代表有这个类。你也可以在按住ctrl的情况下按一下鼠标跳到这个类的js文件那里。

如果还是不好使，给我留言，详细说明一下

如果想让他自动出提示，则导入我写的all.epf文件

File->Import->General->

[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 25]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 25] 
 
[![MyEclipse 10.5与ExtJS 4.1.1自动代码提示][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 26]][MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 26]

All.epf文件是java代码和js代码都自动提示

如果不想java代码自动提示那么就导入JS.epf

如果不想js代码自动提示那么就导入Java.epf

如果都不想自动提示，那么，就导入None.epf

[http_www.agpad.com_downloads_spket-1.6.23.jar]: http://www.agpad.com/downloads/spket-1.6.23.jar
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1]: http://s12.sinaimg.cn/mw690/afaffa71gce30445bec0b&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1]: /images/20220806/16a26681ad8642d28142c188c94d53fa.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 1]: http://s15.sinaimg.cn/mw690/afaffa71gce304479b75e&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 1]: /images/20220806/5e6b965c7c3c4c6d9d09fcc959dbb8fc.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 2]: http://s3.sinaimg.cn/mw690/afaffa71gce30449552d2&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 2]: /images/20220806/4b2ba04344de45e593737eff5e5da7c1.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 3]: http://s13.sinaimg.cn/mw690/afaffa71gce3044bd7b7c&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 3]: /images/20220806/1524433cf954406fa27b21f0c41d687f.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 4]: http://s11.sinaimg.cn/mw690/afaffa71gce3044d5f66a&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 4]: /images/20220806/f77b5e2f23ca4e7dba0c40faed931daa.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 5]: http://s6.sinaimg.cn/mw690/afaffa71g00de2b285ee5&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 5]: /images/20220806/b52ad07cee1e47f29f0231c033603822.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 6]: http://s14.sinaimg.cn/mw690/afaffa71gce3047291dfd&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 6]: /images/20220806/70b6c3baec19450a95d71096846bc5cd.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 7]: http://s5.sinaimg.cn/mw690/afaffa71gce30474d9864&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 7]: /images/20220806/b1bf7f60b4844ebab7e50f1b782fd2ea.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 8]: http://s4.sinaimg.cn/mw690/afaffa71gce30475575d3&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 8]: /images/20220806/440bab1200974854937ae80c3ed8cc49.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 9]: http://s1.sinaimg.cn/mw690/afaffa71gce30478102a0&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 9]: /images/20220806/523617eca1a54a9eb124bdfbbbadafa9.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 10]: http://s4.sinaimg.cn/mw690/afaffa71g00de2cc27363&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 10]: /images/20220806/8c30d076b10d4e82be1da52ca015e12e.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 11]: http://s10.sinaimg.cn/mw690/afaffa71gce304b8ea1c9&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 11]: /images/20220806/349509c4654d447389fa6278e40b3eb8.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 12]: http://s10.sinaimg.cn/mw690/afaffa71gce304eb641d9&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 12]: /images/20220806/b76c1d8fc4ea4a369ad82adab02317b5.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 13]: http://s5.sinaimg.cn/mw690/afaffa71gce304efbe4e4&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 13]: /images/20220806/7f98f3d10bdf4a61999c96b9f0b78cd2.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 14]: http://s8.sinaimg.cn/mw690/afaffa71gce304f1ddd37&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 14]: /images/20220806/dca3ff19fde8414dbfb9109dc70241ec.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 15]: http://s11.sinaimg.cn/mw690/afaffa71gce30525af80a&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 15]: /images/20220806/754972b044854e7f85c2d7d186dc2834.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 16]: http://s15.sinaimg.cn/mw690/afaffa71gce305738648e&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 16]: /images/20220806/bea2fc3a96a74835be6aa62764590804.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 17]: http://s1.sinaimg.cn/mw690/afaffa71gce3059813420&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 17]: /images/20220806/83951d631faf4f8490409f2ad1c92cee.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 18]: http://s16.sinaimg.cn/mw690/afaffa71g7b04d61318bf&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 18]: /images/20220806/437ac8369cc8438790a7b69a839fd8ba.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 19]: http://s7.sinaimg.cn/mw690/afaffa71gce3060800526&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 19]: /images/20220806/05a25600342f4ae98bfd298a096d2a1e.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 20]: http://s9.sinaimg.cn/mw690/afaffa71gce306220b2e8&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 20]: /images/20220806/b9919f1881f7404e86a5c1a837be28ae.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 21]: http://s7.sinaimg.cn/mw690/afaffa71gce3063211e16&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 21]: /images/20220806/82ccec27e879421489453971e3bf5a48.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 22]: http://s12.sinaimg.cn/mw690/afaffa71gce306444f8db&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 22]: /images/20220806/47c3e4db93fa43c2b45b5f248239215c.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 23]: http://s7.sinaimg.cn/mw690/afaffa71gce30655e2a76&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 23]: /images/20220806/1053466f287d459fbf621d132fa927f0.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 24]: http://s10.sinaimg.cn/mw690/afaffa71gce30669a6d99&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 24]: /images/20220806/75d6a20d87d44ba1843756d73f432fe0.png
[http_dl.vmall.com_c0v7pv4fvi]: http://dl.vmall.com/c0v7pv4fvi
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 25]: http://s10.sinaimg.cn/mw690/afaffa71gce306c8f9f49&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 25]: /images/20220806/a871bee384ed4fadbeabee5ba82fc4a9.png
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 26]: http://s10.sinaimg.cn/mw690/afaffa71gce306c9e4b99&690
[MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1_MyEclipse _wbr_10.5_ExtJS _wbr_4.1.1 26]: /images/20220806/619e4e9d93774ac19e2818686f9f3716.png