第3章ExtJS 4.0的基本功能
在深入了解一个技术时，从它能实现的一些基本功能入手是个不错的选择，对于ExtJS来说它为我们准备了很多效果绚丽的组件，现在就从最基本的组件开始学习ExtJS。
本章内容提示：
• ExtJS组件配置说明
• 信息提示框组件介绍
• 进度条组件介绍
• 实现工具栏和菜单栏
3.1 ExtJS组件配置说明
ExtJS为Web开发引入了在桌面开发中已经非常成熟的组件概念，只需要进行简单的配置或根本不需要配置就可以使用ExtJS提供的丰富组件，这些配置主要表现为两种形式，一种是常见的用逗号分隔的参数
列表，另一种是利用JSON对象为组件提供配置信息。这两种方式各有所长，对于比较简单的配置一般采用逗号分隔的参数列表进行设置，对于较复杂的配置一般采用JSON对象的方式为组件提供配置信息。
接下来会分别介绍这两种配置方式，在一些常见的组件中将同时看到这两种方式的使用，在开始之前先简单地了解一下JSON。
3.1.1 JSON介绍
JSON的全称是JavaScript Object Notation（JavaScript对象符号）。JSON是一种结构化的、轻量级的、完全独立于语言的、基于文本的数据传输格式，在很多场合下用来替代XML文件格式。在表达相同的信息时，JSON比XML形成的文件更小、更便于机器解析。
JSON格式非常适合于那些具有一些属性和值的简单对象，它以“{”开始，以“}”结束，属性名和值用“:”分隔，属性间用“,”分隔。JSON的属性可以是简单的字符串、数组、数字、true、false、null或者对象。
接下来我们来看一个JSON对象的简单例子。
代码3-1：JSON对象示例
<script language='javascript'>
var person = { //JSON对象定义开始
name:'tom', //字符串
age:24, //数字
sex:'man',
married:false,
//布尔值books:[
//数组，在数组中又嵌入了两个JSON 对象{name:'历史',price:30},
{name:'文学',price:25}
]
} //JSON 对象定义结束//通过点号表示法来取得JSON 对象的内部属性alert(person.name + ' ' + person.age + ' ' + person.sex);
</script>在代码3-1中，定义了变量person
，它引用JSON 对象，这个对象表示了一个名叫tom 年龄24的未婚男性的基本信息，他有2本书：一本书叫历史，定价30
元；一本书叫文学，定价25元，用非常熟悉的点号表示法就可以
从person 对象中获取需要的各种属性值。运行效果如图3-1所示。
从图3-1中可以看到，成功取得了JSON 对象内部的属性值，
由此可见编写和使用一个JSON 对象是非常简单的。
除了点号表示法，我们也可以使用中括号表示法访问JSON
中的数据，例如person["name"]，中括号表示法的优点在于，可
以通过字符串参数获取属性值。
提示：在这里对JSON 只做简单的说明，如果希望对JSON 做更详细的了解请阅读相关专业资料（/这个网站有关于JSON 的丰富资料）。
3.1.2 ExtJS 组件配置方式介绍
有了以上知识，接下来就可以看看ExtJS 对组件进行配置的2种基本方式有什么不同，以及如何使用这些方式。
1. 使用逗号分隔参数列表配置组件
javascript说明首先来看一个简单的逗号分隔参数列表配置组件的例子。这个例子非常简单，它用来显示信息提示框，在后边的文章中对信息提示框会有更详细的介绍，在这个例子中只需要关注它的配置方式，配置方式是重点，现在来看下边的代码。
代码3-2：逗号分隔参数列表示例
<script type="text/javascript">
Ext.Msg.alert('提示','逗号分隔参数列表'); //这种配置方式非常常见
});
</script>在代码3-2中调用了ExtJS 的Ext.Msg.alert 方法显示一个信息提示框，该方法接受一个逗号分隔的参数列表，该方法的详细说明请参考3.2.2节。运行效果如图3-2所示。
ExtJS 4.0的基本功能
35图3-1 通过点号表示法取得JSON 对象属性
2. 使用JSON 对象配置组件接下来看一个使用JSON 对象配置组件的例子，这里依然只需要关心配置方式而不需要将注意力放在具体的配置项目上，为了与第一种方式对比，先给出组件运行之后的效果，如图3-3所示，再来分析配置过程。
图3-3中显示的信息提示框与图3-2中显示的效果看起来非常相似，但它们有着不同的配置方式，下边是一个包含配置信息的JSON 对象的代码示例。本书约定：在本书中统一把这种包含组件配置信息的JSON 对象叫做配置对象。
代码3-3：配置对象示例
<script type="text/javascript">
var config = { //定义配置对象
title:'case01',
msg: '我的配置很简单，不信来看看我的源代码吧！'
}
Ext.Msg.show(config); //将配置对象传入方法中
});
</script>
在代码3-3中定义了一个配置对象config 它包含2个配置项，分别是title 和msg （关于配置项的说明见3.2.6节），将config 作为参数提供给Ext.Msg.show()，就成功配置了一个满足需要的信息提示框组件，同第一种方式相比，这种配置方式显得更紧凑。
在实际开发过程中并不严格区分这2种配置方式，JSON 对象也可以作为逗号分隔参数列表中的一部分，使组件的配置更加灵活。
ExtJS 开放了大量配置项以满足程序员在实际项目中的各种不同需求，熟悉各个配置项的配置方式及配置效果是我们快速掌握ExtJS 的一个捷径。
提示：ExtJS 提供了详细的API 文档，在API 文档中对每个组件的配置项及配置方法都给出了明确的说明，在实际开发过程中随时查看API 文档对掌握组件的使用很有帮助。
3.2 信息提示框组件介绍
在程序开发中最常见也最常用的组件就是信息提示框了，在Web 页面中alert()可谓人人皆知，利用它向用户提示各种信息，但其单调的界面一直促使我们寻求一种更美观，功能更强大的替代品，来满足用户日益挑剔的目光。ExtJS 就提供了一系列美观实用的信息提示组件，现
36
第3
章
图3-2 使用逗号分隔的参数列表配置组件图3-3 使用JSON
对象配置组件
在来看看它们都是什么模样以及如何配置和使用的。
3.2.1 认识Ext.window.MessageBox Ext.window.MessageBox 是一个工具类，它继承自Ext.window.Window 对象，用来生成各种风格的信息提示对话框，其实例对象可以通过Ext.MessageBox 或Ext.Msg 进行访问，使用Ext.MessageBox 和使用Ext.Msg 有相同的效果，而后者提供了更简短的调用方式。为了描述方便后边我们将使用Ext.MessageBox 代表Ext.window.MessageBox 实例对象。
提示：Ext.MessageBox 和Ext.Msg 只是引用了Ext.window.MessageBox 的实例对象，Ext.Msg.alert 方法调用的是Ext.window.MessageBox 实例对象的alert 方法，请读者仔细思考，避免混淆两者之间的关系。
在介绍前，先来了解Ext.MessageBox 提供的信息提示框与JavaScript 提供的原始信息提示框的差别，主要表现在3个方面，它们分别是“实现方式”、“显示信息的格式”和“对程序运行的影响”，下面对这3方面分别进行详细的说明。
1. 实现方式
标准JavaScript 提供的信息提示对话框是一个真正的弹出窗口。Ext.MessageBox 提供的信息提示对话框并不是真正的弹出窗口，它只是在当前页面显示的一个层（div ），所以无法用窗口捕捉软件来得到它。
2. 显示信息的格式
标准JavaScript 提供的信息提示对话框中所显示的内容不是HTML 格式文本，而是纯文本。不能使用HTML 中的格式化方法进行排版，只能以空格、回车以及各种标点符号来构建显示格式，如图3-4所示。
代码3-4：标准alert 示例
<script type="text/javascript">
alert('只能使用纯文本');//这里不支持HTML 格式的字符串
</script>
执行代码3-4会显示一个标准JavaScript 支持的alert 信息提示框，它只接受一个参数输入并且不支持使用
HTML 标签进行格式
化。运行效果如图3-4所示。Ext.MessageBox
提供的信息提示对话框显示的文本不仅支持
纯文本显示还支持使用HTML 格式文本，采用HTML 中的格式化
方法进行排版，效果更加丰富多彩，代码3-5是一个简单的示例。
代码3-5：ExtJS 的alert 示例
<script type="text/javascript">
//使用HTML 标签格式化文本
Ext.Msg.alert('提示','<font color=red>支持HTML 格式文本</font>');ExtJS 4.0的基本功能
37
图3-4 只支持纯文本的原始信息提示框
});
</script>在代码3-5中使用标准的HTML 标签格式化，显示信息提示框中的文字，这种方式很灵活，因为所有的HTML 标签在这里都是有效的，甚至可以在提示
信息中增加动态图标，使提示信息更加生动。运行效果如图3-5所示。
可以看到HTML 标签在这里产生了效果，控制了显示
样式。
3. 对程序运行的影响
标准JavaScript 提供的信息提示对话框会对JavaScript 程序
的运行产生阻塞。Ext.MessageBox 是异步的，它的调用并不会停止浏览器中代码的执行。如果
希望在信息提示框出现并且用户做出反馈后才调用程序，就需要把相应程序组织成一个函数，并且将该函数作为回调函数提供给Ext.MessageBox ，在用户做出反馈后该回调函数将被调用，这样就可以达到控制程序执行的目的了。
代码3-6：标准alert 阻塞程序运行示例
<script type="text/javascript">
alert('我会停止程序的执行。');
Ext.Msg.alert('提示','我不会停止程序的执行。');
});
</script>执行代码3-6会看到标准alert 显示，而ExtJS 版的alert 并没有
同时显示出来，说明程序的执行在显示标准alert 之后被阻塞了，
导致接下来的代码没有执行，效果如图3-6所示。
代码3-7：ExtJS 的alert 未阻塞程序运行示例
<script type="text/javascript">
Ext.Msg.alert('提示','我不会停止程序的执行。');
alert('我会停止程序的执行。');
});
</script>执行代码3-7会看到标准的alert 与ExtJS 的alert 同时出现，说明ExtJS 的alert 是异步执行的，它并不会阻塞程序代码的继续执行，这是它与标准alert 最大的区别，会对编写代码的方式产生一定的影响，这一点会在3.2.2节中进行详细的说明。效果如图3-7所示。
到这里我们已经介绍了ExtJS 信息提示框与标准JavaScript 信息提示框的区别及特点，接下来我们将依次介绍各种不同类型的提示框效果。38
第3章
图3-5 支持HTML 格式化的ExtJS 信息提示框
图3-6 原始信息提示框会停止程序的继续运行
发表评论