1.4 Ext JS的开发工具的获取、安装与配置介绍
1.4.1 Ext Designer
Ext Designer是一个所见即所得的创建Ext JS界面的工具软件，目前版本是1.2版，支持Ext JS 3.x和4.x版本，可在http://www.sencha.com/products/designer/download/下载试用版本。
- 安装
双击下载文件将看到如图1-6所示的语言选择窗口。
选择简体中文后，单击“OK”按钮后将看到如图1-7所示的设定窗口。
单击“前进”按钮，将看到如图1-8所示的软件授权协议窗口。
选择目录后，连续单击两次“前进”按钮，进入安装过程，安装结束后，将看到如图1-10所示的安装完成窗口。
从主窗口可以看到，主要分为3个区域，左边是组件选择区域，中间是编辑区域，右边是组件树、Store和属性窗口，与我们习惯的开发工具没有区别。
我们尝试制作一个通用的邮件界面。在左边找到Containers面板，把Viewprot拖动到编辑区域，然后设置其layout属性为border。接着找到“Tree/Tree Grid”面板，把“Tree Panel”拖动到Viewport内，然后设置其width属性为200，maxWidth属性为300，region属性为west，勾选split属性。
接着在Containers面板拖动一个Container组件到Viewport内，设置其layout为border。
再在Containers面板内拖动一个Panel组件到Container组件内，设置region属性为south，属性height为100，maxHeight为300，勾选split属性。
最后在Grid面板，拖动一个Grid Panel到Container组件内。
我们将看到如图1-15所示的最终效果。
单击“Preview”按钮，将看到如图1-16所示的预览窗口。
单击“Code”按钮将切换到如图1-17所示的代码显示窗口。
代码分为Class和JSON两种格式。Class格式会把刚才的设计定义为一个扩展，保存到一个脚本文件内，然后通过动态加载或直接使用Script标记引用，再实例化。而JSON格式则可直接使用create方法进行实例化。
总体来说，Ext Designer是一款不错的Ext JS设计工具，尤其是在使用Ext JS MVC应用框架的时候。单个包219美元也不算太贵，值得购买一套，然后找专人负责界面的设计，笔者觉得是物有所值的。
1.4.2 在Visual Studio中实现智能提示
Visual Studio（下面简称VS） 2008年和2010年都有从JS库文件获取智能提示的功能，不过直接使用Ext JS的库文件的话，虽然也有提示，但是不全，应该说是大部分没有。主要原因是VS脚本提示功能是根据原生JavaScript对象的结构读取的，而Ext JS的对象定义与原生JavaScript对象完全不同，因而很难取得其属性和方法。因而，要完整支持Ext JS的智能提示，就必须将Ext JS对象的属性和方法提炼出来，然后组织成一个VS能读懂的JavaScript对象结构，这样就能实现智能提示了。
要将Ext JS对象的属性和方法提取出来不难，从图1-18中DOM树中的Ext对象结构可以看到，只要遍历一次Ext对象就可以取得所有对象的属性和方法。不过，实际上不是那么容易，原因是在Ext JS的对象中，有些是实例，有些是函数形式的对象，对于实例，其属性和方法直接在对象内，而对于函数形式的对象，其属性和方法却是在原型内，因而要区别对待。
还有一个重要问题就是命名空间的问题，如Ext.menu.Item、Ext.data.Store或Ext.layout. container.VBox这些3或4级的类名。采用递归遍历，判断该对象是JavaScript对象还是Ext JS方式定义的对象有难度，因而，最好的方式是使用附录中的类名列表，通过它去遍历对象，这样就简单很多了。在列表中，如果对象是实例，使用Ext的isObject方法，其值会是true，否则，该对象就是函数式对象，需要实例化才能使用，因而属性和方法在原型内，不过这里要注意可能存在静态方法，为了避免遗漏，还得遍历对象本身的属性和方法。
Ext对象本身需要另外加进去，主要原因是它不同于其他对象那样可直接通过对象本身或原型提取属性和方法，需要把在类列表中的类排除出去，这个可通过对象或函数是否存在“$className”属性解决。
还有对象的别名问题，这个可直接从ClassManager对象的maps对象中的alternate-ToName属性中取得，将别名直接指向对象VS就认识了。
最后的问题是如何将对象输出到页面，这个通过encode方法就可以自动转了。
命名空间的问题可通过ns方法解决，它会自动根据类名创建对象，只要别和Ext对象发生冲突就行了。
目标明确后，现在可以开始工作，创建一个名称为VS-Ext.html的文件，然后加入示例1-1所示的代码。
示例1-1 VS-Ext.html文件代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>第1章 在Visual Studio中实现智能提示</title>
<link rel="stylesheet" type="text/css" href="../Ext4/resources/css/ext-all.css"/>
<script type="text/javascript" src="../Ext4/bootstrap.js"></script>
<script type="text/javascript" src="class.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
//建立命名管道
Ext.ns("VS.Ext");
var processPrototype=function(s,d){
//处理静态方法
for(var c in s){
if(s.hasOwnProperty(c)){
d[c]="";
}
}
//处理原型
for(var c in s.prototype){
d[c]="";
}
}
//处理实例
var processInst=function(s,d){
var i=0;
for(var c in s){
d[c]="";
}
}
//处理Ext对象
for(var c in Ext){
if(Ext.hasOwnProperty(c)){
var p=Ext[c];
if(Ext.isObject(p)){
if(!p["$className"]){
if( ["buildSettings","versions","lastRegisteredVersion"].indexOf(c)>=0 ){
VS.Ext[c]=p;
}
}
}else if(Ext.isFunction(p)){
if(!p["$className"]){
VS.Ext[c]="";
}
}else{
VS.Ext[c]="";
}
}
}
//枚举对象
Ext.Array.each(classList,function(classname){
Ext.ns("VS."+classname);
var d=classname.split("."),
sobj=Ext[d[1]],
dobj=VS.Ext[d[1]];
if(d.length >= 3){
sobj=sobj[d[2]],
dobj=dobj[d[2]];
}
if(d.length == 4){
sobj=sobj[d[3]];
dobj=dobj[d[3]];
}
if(sobj && dobj){
if(Ext.isObject(sobj)){
processInst(sobj,dobj);
}else{
if(sobj.prototype){
processPrototype(sobj,dobj);
}
}
}
})
var html="Ext="+Ext.encode(VS.Ext)+"<br/>";
//处理别名
for(var c in Ext.ClassManager.maps.alternateToName){
html+=c+"="+Ext.ClassManager.maps.alternateToName[c]+"</br>";
}
Ext.getBody().dom.innerHTML=html;
})
</script>
</body>
</html>
代码中，先创建新的命名空间“VS.Ext”，在其内放置对象的属性和方法。
函数processPrototype用于处理非实例的对象，第一个循环主要是遍历静态属性和方法。第二个循环用于遍历原型的属性和方法。
函数processInst用于遍历实例的属性和方法，在这里不能加hasOwnProperty方法检测属性或方法是不是它拥有的，不然会找不到属性和方法，除非是在实例创建后加的属性和方法。
接着处理Ext对象，如果属性指向的是对象，还要排除grid、form等对象干扰，这个要自己查看一下Ext的源代码，做一下处理。
接下来是枚举class.js中的类，先通过ns方法生成类的命名空间，然后根据小数点拆分一下类名，取得源对象和目的对象后根据isObject确认对象是实例还是非实例，进行相应的处理。
最后是把VS对象内的Ext对象和ClassManager对象内的别名对照表转换为文本，输出到页面。
在浏览器中打开页面，将看到一个JSON格式的输出文本，全选该文本，然后复制到一个名称为Ext.js的文件内，这样，通过该文件就可在VS内实现智能提示了。
要使用Ext.js，应首先将文件复制到项目中，然后根据编辑的文件类型采用不同的方法。
如果是单独的脚本（扩展名为js）文件，在脚本文件头部加入以下语句：
/// <reference path="[相对路径]/Ext.js" />
这里一定要注意路径，如果要编辑的脚本文件与Ext.js文件路径相同，语句为：
/// <reference path="Ext.js" />
最简单直接的方法，就是在解决方案资源管理器中把Ext.js文件直接拖动到编辑的脚本文件中，这样会自动生成该语句。
有了该语句后，输入“Ext.”就可以看到如图1-19所示的智能提示了。
如果是HTML文档，只要将Ext.js的引用加入文档就行了，一定要将该文件放在Ext JS库文件的前面，这样才不会影响调试。文件编辑完成后，记得将该引用清除。
1.4.3 Spket
Spket IDE是一个功能强大的JavaScript和XML编辑器，是理想的Ext JS开发工具。不过，有点遗憾的是，它对非商业使用免费，如果是商业使用，则需要购买许可证。
可登录http://spket.com/download.html下载Spket，本书使用的版本是1.6.18。下载的是一个文件名为spket-1.6.18.jar的jar文件，需要Java环境支撑。所以在安装Spket前，需要在机器上安装并运行Java 1.5或更高版本。
Java安装好以后，运行spket-1.6.18.jar文件将看到如图1-20所示的窗口。
单击“Next”按钮将看到如图1-21所示安装类型选择窗口。
在安装类型选择窗口中，可选择作为独立的应用程序安装，还是作为Eclipse的插件安装。不做任何修改，单击“Next”按钮将看到如图1-22所示的安装路径选择窗口。
不修改路径，直接单击“Next”按钮进入如图1-23所示的预备安装窗口。
单击“Install”按钮等待安装完成。最后单击“Finish”按钮完成安装。
在安装目录下允许“spket.exe”文件，即可打开Spket IDE。程序运行后会出现如图1-24所示的工作目录设置窗口。
如果不想每次打开都选择一次工作目录，可把左下角的选择框选上。
进入如图1-25所示的Spket IDE主窗口后，要实现Ext JS的智能提示，需要做一些配置。
在Window菜单下选择Preferences子菜单，在弹出窗口中展开Spket节点，然后选择“JavaScript Profiles”节点，将看到如图1-26所示的设置窗口。单击右边的“New”按钮，在弹出窗口的输入框中输入“Ext JS 4”，单击“OK”按钮关闭窗口。在中间的列表窗口会多出一个“Ext JS 4”的列表项，选择该项，然后单击“Add Library”按钮，在弹出窗口中的下拉列表框中选择“Ext JS”并单击“OK”按钮返回。这时，在“Ext JS 4”列表项下会多出一个
“Ext JS”的子选择项，选择该项并单击“Add File”按钮，在弹出的文件选择窗口中，在Ext JS目录中寻找并选择“ext.jsb2”文件，然后单击“打开”按钮。在“Ext JS”的子选择项下会增加Ext JS的类选择项，将你需要的类选择上，然后选择“Ext JS 4”项，单击“Default”按钮。最后单击“OK”按钮完成配置。
注意 如果找不到ext.jsb2文件（Ext JS4好像以新方法提供，一般情况下没有该文件），也可以使用1.4.2节中生成的Ext.js文件，笔者测试过，效果是一样的。
1.4.4 在Eclipse中实现智能提示
要在Eclipse中实现Ext JS的智能提示，最好的方式是将Spket IDE安装为Eclipse的插件，这样通过Spket就可轻松实现了。具体的配置方法可参考1.4.3小节。
