《Ext JS实战》——1.6 测试

本节书摘来自异步社区《Ext JS实战》一书中的第1章，第1.6节，作者：【美】Jesus Garcia著，更多章节内容可以访问云栖社区“异步社区”公众号查看

1.6 测试

在这个练习中，要创建一个Ext JS的Window，然后通过Ajax请求一个HTML文件，并把文件的内容展现在Window的内容区域。现在从创建主HTML文件开始，然后是所有的JavaScript文件。

代码1-1 创建helloWorld.html

代码1-1是典型的只有Ext配置的HTML标记，包含了合并版的CSS文件，ext-all-css1和两个必须的JavaScript文件ext-base.js和ext-all-debug.js2。接着，又创建了一个JavaScript块3，这里对重要的Ext.BLANK_IMAGE_URL属性进行了设置。最后，把很快就要创建的helloWorld.js文件包括进来4。

你可能还没注意到，对于框架的引用使用的是绝对路径的方式。如果路径不一样，一定要改过来。接下来，要创建helloWorld.js这个文件，这个文件会包含主要的JavaScript代码。

代码1-2　创建helloWorld.js

在代码1-2中，创建了buildWindow函数，这个函数又被传递给Ext.onReady以备稍后执行。在buildWindow中，创建了一个新的Ext.Window实例1，并通过win引用这个实例。给Ext.Window传递了一个配置对象，这个对象中包括了初始化窗口实例所需要的一切配置属性。

在这个配置对象中，把id设为'myWindow'，以后Ext.getCmp方法就可以根据这个id找到这个窗口。接着又指定了这个窗口的标题，标题会以蓝色字体显示在窗口的最顶部区域，也就是叫做标题栏的地方。接下来，指定了窗口的高度和宽度。然后把layout设置成'fit'，这可以保证不管这个窗口中放的是什么内容，这个内容都会填满窗口的内容空间。我们又继续指定了一个autoLoad配置对象2，这个对象通知窗口自动取出一个HTML片段内容（通过url属性指定的），如果里面有JavaScript，还会运行这些代码（通过scripts:true指定）。

HTML片段（HTML fragments）
所谓HTML片段就是没有用head和body标签包围起来的HTML，因此不会被认为是一个完整的页面。Ext JS之所以要加载HTML片段，是因为一个页面中只能有一个HEAD和BODY标签。1
完成了Ext.Window实例的配置对象之后，接下来，又调用了win.show3，这个方法是渲染窗口。这些就是对buildWindow内容的总结。最后一件事就是调用Ext.onReady4并把buildWindow方法传进去。这可以保证在正确的buildWindow，也就是在DOM完全就绪之后并且在获取任何图像之前执行。下面看看窗口是怎么渲染的。在浏览器打开helloWorld.html。如果之前的所有代码都正确，应该看到图1-19所示的一个窗口，在“Loading…”文本旁边会有一个转动的图标，这个图标其实是加载指示符，表示数据还在加载中。

为什么会看到这个消息呢？这是因为还没有sayHi.html页面，在autoLoad配置对象的url属性中指向的就是这个页面。事实上，这里是在让Ext JS加载某些还不存在东西。接下来，就要处理这个sayHi.html了，下面会在这个文件中建一个HTML片段，其中还会包含一些JavaScript。

代码1-3　创建sayHi.html

在代码1-3中，创建的是一个带有HTML片段的文件sayHi.html。这个片段中有一个DIV1，“Hello world”消息就放在这里。接着，又用了一个script标签和一些JavaScript代码，浏览器加载这个片段时就会运行这段代码。在这部分代码中，创建了一个名为highlightWindow的新函数2，这个函数会延迟一秒执行。在函数内部，对窗口的内容区域执行了一个highlight的效果。highlightWindow的执行延迟一秒3。这个方法是这么工作的。

首先通过使用一个名为Ext.getCmp的辅助方法取得在helloWorld.js文件中创建的Window的引用，Ext.getCmp根据id查找Ext JS组件。在创建这个窗口时给它的id是'myWindow'，传给Ext.getCmp的就是这个id。之所以能够这么做，是因为所有的组件（部件）在初始化时都会用ComponentMgr进行注册。在程序的任何地方都可以通过Ext.getCmp根据id得到引用。

在得到了窗口的引用之后，又用窗口的body属性得到了窗口内容区的引用，winBody。然后调用它的高亮方法，这个方法会对元素进行高亮操作（从黄色渐变成白色）。这些内容就是对highlightWindow方法的总结。

这段JavaScript代码块所做的最后一件事就是调用highlightWindow.defer使用的值是1000，这会让highlightWindow的执行延迟1000毫秒（或者1秒）。

如果说从来没听说过JavaScript中有个defer，不要紧，因为这是个Ext引入的方法。Ext JS利用了JavaScript的可扩展性对一些核心的语言类，例如Array、Date、Function、Number、String添加了许多好用的方法。这就意味着这些类的每个实例都有了新的好用的方法。就这个例子而言，用到的是defer，它是Function的一个扩展。如果经验足够丰富，可能会问，“为什么不用setTimeout呢？”。第一个原因是因为更简单，调用任何方法的.defer，然后传入一个时间就可以延迟其执行。第二个原因是因为可以对被延迟执行的方法执行的作用域进行控制，并传入定制的参数，这也是setTimeout所欠缺的。

现在就可以结束这个HTML片段了，Window也能取到这个片段了。刷新helloWorld.html后，可以看到如图1-20所示的内容。

图1-20 Ext JS Window加载 HTML片段（左）对内容区使用高亮效果

如果一切正确，看到的结果也应该与图1-20一样，首先内容区域会用HTML片段更新（左），经过1秒钟之后，窗口的内容区域会用黄色高亮显示（右）。很酷吧？建议你花些时间调整一个这个例子，例如用API修改高亮效果的颜色。提示一下：从Ext JS > Fx下载有效果的列表以及对应的参数。