《ExtJS 3详解与实践》阅读补充资料:编写Hello World

 

 

使用Ext编写Ajax应用程序时,初学者往往都会感到迷惑:到底应该怎样编写Ajax程序?事实上,每个初学者都会遇到这种情况——不知该如何下手,有时只是因为一点点设置不对就卡住了整个程序的运行,连HelloWorld也可能成为新手的拦路虎。为了帮助新手尽快消除这种困惑,我们这里先为新手准备一份详尽的启动文件清单,说明清楚运行该框架的最基本条件到底是哪些;然后再简单地跑一趟对话框MessageBox作为Hello World。首先是对这份HTML文件的详解:

 

<!-- 标识html开始 --> <html> <!-- 每份有效的HTML应符合标准,为此head标签不能少 --> <head> <!-- 下面一行规定了本页面是UTF-8格式编码的。 --> <!-- 应一句俗话:“用了UTF-8,走遍天下都不怕”,意思是说UTF是一种囊括了信息世界中大部分语言的编码标准,无论客户终端,各平台架构都可放心地使用。这样,就要统一页面和数据交换的字符本身都是UTF-8的。--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- Ext自带的样式表,由于脚本中须引用这些样式的定义,所以必须在声明语句的次序上,做到“样式优先”:放在script标签之前。 --> <link rel="stylesheet" type="text/css" href="../share/resources/css/ext-all.css" /> <!-- 接着就是你准备好的CSS样式 --> <!-- 居最先位置的是适配器(adapter)脚本……--> <script type="text/javascript" src="../share/ext-base.js"></script> <!-- ……然后Ext为本身,当前是供调试用debug的版本 --> <script type="text/javascript" src="../share/ext-all-debug.js"></script <!-- 以下是你项目用到脚本 --> <!-- 设置页面的标题(可不填) --> <title id="page-title">Title</title> <!-- 之所以引入以下script标签是为了说明Ext.onReady在页面程序中的必要性。不过你可以在外围的脚本文件中包含它,那么这里就可以不重复了 --> <script type="text/javascript"> // 修改该空白背景图的路径,指向你服务端一个有效的图片路径。 Ext.BLANK_IMAGE_URL = '../share/resources/images/default/s.gif'; // 程序总入口 Ext.onReady(function() { // 调用程序吧! }); </script> <!-- 关闭head标签 --> </head> <!-- 大多数情况body 为空的,这一点与普通页面的body很不同。 --> <body></body> <!-- 最后关闭的html标签 --> </html>

 

最后加入以下这段<script>……</script>在<head></head>元素的包裹范围内。成功运行的话如图所示,表明加载Ext库正确!《ExtJS 3详解与实践》阅读补充资料:编写Hello World

 

<script> function HelloWorld (){ Ext.MessageBox.alert("Hello World", "这里是Ext的世界!"); } // 用Ext.onReady事件在页面Ready的时候执行HelloWorld 的函数。 Ext.onReady(HelloWorld); // 注意这里不必加入括号() </script>

最后我们明确一下运行Hello World的最低知识要求。假设学习的起点为,应该懂得HTML代码,特别是怎么动态生成HTML的。然后就是一些网络数据的交换方式理解:get,post,XML/JSON等,这些东西不管在WEB上还是在软件开发中都极为重要,毕竟AJAX是基于浏览器环境的。 最后是你要至少懂得一门可以写后台程序的语言,ASP(JScript,VBS),PHP,CGI,JSP或者是.NET。因为毕竟AJAX是通过后台动态交换数据,来实现页面信息变化的。

 

此处披露的内容是《ExtJS 3详解与实践》 的补充内容,完整的资料敬请参阅《ExtJS 3 详解与实践》 一书的全面介绍。

 

上一篇:本站索引帖


下一篇:早期 Web 控件的尝试