eclipse+spket+extjs4.1开发环境搭建和代码智能提示

搭建开发环境，首先要准备好几样东西：eclipse，tomcat，extjs4.1，还有spket，大家去相关网站下载，都去官网，既可以防止有毒又是最新版。这里提一下spket的下载。spket的下载网站是：
http://www.spket.com/
点击右上角的Downloads进入下载页面，这个产品是个人使用免费，商业用途收费的，大家看着用。这里是作为eclipse的插件使用，按Plugin进入下载页面把他下载下来。解压，把里面eclipse文件夹下面的features和plugins复制到eclipse根目录下与这两个同名的文件覆盖，重启eclipse，然后Window=>Preferences，看到左边有spket选项证明你安装成功了。
继续刚才的窗口：
点击左边选项的Spket
=>JavaScript Profiles
=>右边的按钮中点New
=>Name里面输入 ExtJS （这个名字随意）
=>OK
=>选中ExtJS
=>Add Library
=>Library下拉选项中选中ExtJS
=>OK
=>选中刚才新建的那个ExtJS
=>Add File
=>选中在系统另一个地方解压的ExtJS包的跟目录下的build下的sdk.jsb3（这个文件错误很多，在下一篇文章我会说明修改的方法，暂且先这样用着）
=>然后会出现很多选择框让你选择要哪些提示，我全勾了
=>然后按根节点的ExtJS（注意是最根部的那个ExtJS）
=>点击右面的按钮Default（这步很重要，不按他就不会自动提示了）
=>OK退出
现在是让spket作为javascript的默认编辑器：
Window
=>Preferences
=>General
=>Editors
=>File Associations
=>右面的File types选中*.js
=>下面的Associated editors选中Spket javascript Editor
=>按右面的按钮Default
=>OK退出
然后你看到js文件的图标变成

就代表你成功了。

怎么创建一个ExtJS的工程呢，我先演示一下如何做一个HelloWord的。
新建一个工程（动态网页，eclipse中是Dynamic Web Project），先不要引入ExtJS包，
右键工程图标
=>Properties
=>Resource
=>Text file encoding
=>Other
=>UTF-8
=>左边选Builders
=>去掉JavaScript Validation和Validation前面的勾
=>OK退出
还不能导入ExtJS包，这样会卡死eclipse的。去到工程根目录下，找到.project，用记事本打开，把两处删除掉：

第一处：

<buildCommand>
<name>org.eclipse.wst.jsdt.core.javascriptValidator</name>
<arguments>
</arguments>
</buildCommand>
第二处：

<nature>org.eclipse.wst.jsdt.core.jsNature</nature>

保存退出，refresh一下工程。再把ext包复制进工程，我现在是把整个复制进来，具体怎样才是最小的发行包大家可以参照网上的各种资料，我也是初学，不是太清楚。
运行根目录下的index.html（部署可能需要一段时间），能到主页说明你成功了。具体的代码提示我会在下一篇文章介绍。

如果大家照着上面的文章做并且有兴趣做了第一个ExtJS程序的话，你会发现代码提示真的很少，连Ext.onReady和Ext.create都没有提示。其实不是spket的错，是ext自己做错了。Ext根目录下面的sdk.jsb3一大堆的都是错误，而这个正是我们的智能提示要引入的文件，那智能提示当然有错误了。
用js的编辑器打开这个文件，我用了dreamweaver打开。你把里面涉及到目录的重头到尾略略地看一次再比较真实的目录，你就知道目录错了。错误的是基本上所有的目录。错误大概有几种类型：

pkgs/xxx应该是../pkgs/xxx

../platform/core/xxx应该是../src/core/xxx

../platform/src/xxx应该是../src/xxx

src/xxx应该是../src/xxx

还有其他的相对目录都漏了../

经过观察，大家想必也知道解决方法了。只是第二个和第三个错了，其他都是漏了../。但是要修改起来很麻烦，怎么办呢？我们可以把文件放在上一级目录下面（ExtJS根目录），看，第一个、第四个和第五个问题都解决了。那只要把第二个和第三个替换掉就行了。但是替换要讲一点技巧，要把前面的尽量多的字都打进去，才能避免把其他的都替换了。综上，可以这样替换：

把 "path": "../platform/core/ 替换成 "path": "src/core/

把 "path": "../platform/src/ 替换成 "path": "src/

替换的字最好是自己复制文件的，要是这里的变成了中文符号我就不负责了。

再找到以下代码：

{

"src":"../platform/src/",

"dest":"src"

},

{

"src":"../platform/core/",

"dest":"src/core"

},

替换成

{

"src":"src/",

"dest":"src"

},

{

"src":"src/core/",

"dest":"src/core"

},

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

(function(){
Ext.onReady(function(){
Ext.define("person",{
extend:"Ext.data.Model",
fields:[
{name:"name",type:"auto"},
{name:"age",type:"int"},
{name:"email",type:"auto"}
]
});
var p = Ext.create("person",{
name:"水山清风",
age:22,
email:"1112@1112.com"
});
Ext.MessageBox.alert("用define建立的Model","姓名：" + p.get("name") +"<br/>年龄：" + p.get("age") +"<br/>邮箱：" + p.get("email"));
});
})();

你会发现 Ext.onReady和 Ext.create都有提示了。而 Ext.data.Model 你可以先输入再加引号，那样也有提示了，顺带一提，属性名 field 和 extend也是有提示的。如果你不确定自己输入的属性名对不对，可以在加了引号之后按住ctrl键鼠标移到最后一级名字那里看看（例如Ext.data.Model中的Model）看是不是变色并且有下划线了，如果有就代表有这个类。你也可以在按住ctrl的情况下按一下鼠标跳到这个类的js文件那里。然后在另一个html文件里引入extjs-4.1.0/resources/css/ext-all.css
和 extjs-4.1.0/bootstrap.js （相对目录根据自己的目录路径改变）一级这个js文件，就可以在页面看到效果了：