《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库正确!

 

<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 详解与实践》
一书的全面介绍。

 

时间: 2024-11-10 11:51:30

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

《ExtJS 3详解与实践》阅读补充资料:Ext.extend()中使用super关键字

  既然一门语言被精简了,无论idea还是直观的语法,都务求精简的话,那么这便无形就是一个趋势,趋势往往不为人们的意志转移地转为自己的习惯,思维定性的习惯,连function这个关键字也有某仁兄觉得太长了,有缩减的必要.当然这只是开玩笑而已了.   好像Lisp那样满天 点号.冒号便是灾难.用过Ext继承的人都清楚,每每调用父类成员的时候就是Ext.subClass.superclass.methodName.call/apply(this).一整串的长,好处也是明显的,起码这种完全命名方式一个

《ExtJS 3详解与实践》阅读补充资料:capture()捕获事件

静态方法Ext.util.Observable.capture()是一项有趣的功能,它能够将一项事件进行捕获,跟踪该事件发生的经过.捕获事件就是观察Ext JS事件的调用过程.只要是继承了 Ext.util.Observable的组件,调用capture(),便可得知该组件何时何地怎样响应事件,也算是调试组件时的技巧. // 假设已有一个名为'myWindow'的UI组件,用Ext.getCmp()返回该对象. Ext.util.Observable.capture(Ext.getCmp('my

《ExtJS 3详解与实践》阅读补充资料:用BoxComponent制作Logger UI

如果要求的UI控件不需要其他的细节的控件,也就是,仅仅是封装某部分的HTML元素的话,还要听凭布局管理器提供的大小尺寸.布局的调控,那么这个的扩展对象就是Ext.BoxComponent.例如,假设一个Logger类打算是简单地显示log信息,就可以这样定义: Ext.ns('Ext.ux.Logger'); Ext.ux.Logger = Ext.extend(Ext.BoxComponent, { tpl: new Ext.Template("<li class='x-log-entr

《ExtJS详解与实践》阅读补充资料:单页面应用程序的设计

在一般的Web GUI 中,每个应用都分散在一个页面中,会随着页面的跳转而反映在浏览器的地址栏上:稍微复杂的基于Web 系统中,都采用划分Frame 元素或打开浏览器新窗口的方式来组织页面,从浏览器的地址看起来,虽然只有一个地址,但是子Frame 的页面还是会整张页面地刷新.AJAX 改变了以往一张页面一次请求的模式,可以允许在同一张页面发起各种的请求,这样我们对于页面的组织形式有了新的途径.在单页面GUI 模型中,主页面是可以独立加载.更新和替换的一些可视元素的组合.通过这种方式,可以不必在每

《ExtJS详解与实践》阅读补充资料:Grid如何高/宽自适应

Grid高度自适应是许多用户开发过程中碰到过的问题.问题在于,尽管本类是由Panel类继承而得到的,但是不支持其基类的某些功能,所以不能都做到好像一般Panel类那样的方法来解决,如autoScroll.autoWidth.layout.items等-- Grid需要指定一个宽度来显示其所有的列,也需要一个高度来滚动列出所有的行.这些尺寸都通过配置项BoxComponent.height和Ext.BoxComponen.width来精确的指定,又或者将Grid放置进入一个带有某种布局风格的容器中

javascript凌厉开发:extjs3详解与实践的光盘代码

问题描述 javascript凌厉开发:extjs3详解与实践的光盘代码 光盘不见了,网上压根就没这资源, 书中的代码都是片断 求助... 解决方案 重买一本或者联系作者发源代码,你的图书上应该有联系方式

详解WordPress中简码格式标签编写的基本方法_php技巧

WordPress 简码是一种类似于论坛标签的东西,格式类似于把尖括号换成中括号的 Html 标签.简码很多人叫做短代码,但官方的翻译应该是简码,在这里纠正一下. 简码的开发的逻辑比较简单,主要就是添加.删除和判断,会在本文全部介绍. 简码格式 简码的格式非常灵活,可以是有属性.无属性.闭合.非闭合等等: [example] [example]内容[/example] [example attr="属性" attr-hide="1"]内容[/example] [ex

详解JavaScript中的自定义事件编写_基础知识

我们可以自定义事件来实现更灵活的开发,事件用好了可以是一件很强大的工具,基于事件的开发有很多优势(后面介绍). 与自定义事件的函数有 Event.CustomEvent 和 dispatchEvent. 直接自定义事件,使用 Event 构造函数: var event = new Event('build'); // Listen for the event. elem.addEventListener('build', function (e) { ... }, false); // Disp

《Android游戏开发详解》一2.3 编写第一个程序

2.3 编写第一个程序 Android游戏开发详解在选择了工作区之后,Eclipse将会打开,并且你将会看到图2-7所示的欢迎界面. 现在,我们已经准备好了IDE,可以开始编写第一个Java程序了.由于还没有构建任何的Android应用程序,我们可以安全地退出这个标签页.如图2-8所示. 完成之后,我们将可以访问几个不同的视图.现在,只需要关心其中的2个视图:Package Explorer 和Editor Window.如图2-9所示. 2.3.1 创建一个新的Java项目 我们终于开始编写第