《Ext JS实战》——1.6 测试-阿里云开发者社区

开发者社区> 开发与运维> 正文

《Ext JS实战》——1.6 测试

简介: 在这个配置对象中,把id设为'myWindow',以后Ext.getCmp方法就可以根据这个id找到这个窗口。接着又指定了这个窗口的标题,标题会以蓝色字体显示在窗口的最顶部区域,也就是叫做标题栏的地方。

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

1.6 测试

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

代码1-1 创建helloWorld.html

screenshot

代码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

screenshot

在代码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…”文本旁边会有一个转动的图标,这个图标其实是加载指示符,表示数据还在加载中。

screenshot

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

代码1-3 创建sayHi.html

screenshot

在代码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所示的内容。

screenshot

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

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章