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

本文是我在新浪博客写的原创，现在搬家来csdn。

有些代码按了复制键没有效果，但是其实已经复制到剪贴板上面了，大家请注意哦！
我的文章有时会稍有修改，转载请注明出处哦！

 如果大家照着上面的文章做并且有兴趣做了第一个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文件，就可以在页面看到效果了：