用 Ext JS 构建 Ajax 应用程序（1）

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-8-5 12:35 | 只看该作者

用 Ext JS 构建 Ajax 应用程序（1）

当今有许许多多的 Web 开发框架，开发人员很难判断哪些框架值得花时间去学习。Ext JS 是一种 JavaScript 开发框架，这种强大的 JavaScript 库通过使用可重用的对象和部件简化了 Ajax 开发，Web 应用程序开发人员应该认真考虑使用这个工具。Ext JS 最初是 Jack Slocum 编写的一组 Yahoo! User Interface（YUI）Library 扩展。但是，随着 2.0 版的发布，它已经成为市场上最简单最强大的 JavaScript 库。
developerWorks Ajax 资源中心
是一站式站点，包含关于开发 Ajax 应用程序的免费工具、代码和信息。由 Ajax 专家 Jack Herrington 主持，您可以在这里向其他开发人员寻求帮助。

Ext JS 概述Ext JS 项目最初的目的是扩展 YUI Library 提供的功能。YUI Library 的一个关键方面是跨浏览器支持，这也可以在 Ext JS 中找到。这种支持使开发人员在构建 Web 应用程序时不需要考虑目标浏览器。
Ext JS 提供出色的性能。这个框架是完全面向对象且可扩展的。因为 Ext JS 是用 JavaScript 编写的，所以只需下载并安装，就可以使用 Ext JS 的特性。
许可协议在采用一个新框架之前，一定要了解框架基于哪种许可协议条款。Ext JS 提供几个许可协议选项：

开放源码许可证：这采用 Open Source LGPL 3.0 许可证的条款。如果打算在另一个开放源码项目或者个人、教育或非盈利项目中使用 Ext JS，这是最合适的许可证。
商用许可证：如果希望在项目中使用 Ext JS 时避免开发源码许可证的某些限制，或者由于内部原因必须拥有许可证，或者希望在商业上支持 Ext JS 的开发，这是最合适的许可证。中提供了 Ext JS 站点的链接，这个站点提供关于商用许可证的详细信息。
原始设备生产商（OEM）/转售商许可证：如果您打算对 Ext JS 进行重新打包，或者作为软件开发库销售 Ext JS，这种许可证是最合适的。

Ext JS 浏览器支持所有主流的 Web 浏览器都支持 Ext JS 框架，包括：

Windows® Internet Explorer® 6 及更高版本。
Mozilla Firefox 1.5 及更高版本（PC 和 Macintosh）。
Apple Safari 2 及更高版本。
Opera 9 及更高版本（PC 和 Mac）。

设计模式和 Ext JS开发人员应该会喜欢 Ext JS 经过深思熟虑的设计和实现。它的面向对象设计模式反映了对象之间的关系和交互。据设计者说，开发 Ext JS 时使用的设计模式在很大程度上受到 Head First Design Patterns 这本书（Eric Freeman 等著，参见）的影响。查看 Ext JS 源代码，就会发现创建模式（包括 singleton 设计模式）、结构模式（包括 flyweight 设计模式）和行为模式（包括 observer 模式）。
用 Ext JS 构建富因特网应用程序Ext JS 提供大量用户界面元素，这是开发富因特网应用程序（RIA）所必需的。Ext JS 包含消息框、组合框、数据网格和工具栏等控件。另外，还可以通过布局管理器指定元素在页面上的显示方式。还有用于操作表单和窗口的其他特性。
如果使用其他框架，JavaScript 文件的包含次序是可以修改的。但是，Ext JS 通常按照那样包含在 Web 应用程序中（假设 Ext JS 安装在 Web 服务器上的 lib/ext 目录中）：
清单 1. 包含 Ext JS 框架

1 2	<script type ="text/javascript" src="lib/ext/ext-base.js"></script> <script type ="text/javascript" src="lib/ext/ext-all.js"></script>

ext-all.js 包含整个 Ext JS 框架。可以按照上面的排列引用文件，也可以只包含应用程序中使用的元素所需的文件。
Ext JS 的集成可以把 Ext JS 与其他常用的服务器端 Web 开发框架一起使用，包括 PHP、Java™ 语言、Microsoft® .NET、Ruby on Rails 和 ColdFusion。

如果结合使用 Ext JS 框架和其他 JavaScript 库，请参考安装根目录中的 INCLUDE_ORDER.txt 文件，它说明了在应用程序中包含库的次序。
用户界面元素Ext JS 框架的主体是大量用户界面元素。这些元素包括表单、对话框、选项卡、树和网格。
表单Ext JS 提供一组用来创建交互式表单的工具。给出一个表单示例。给出相关的实现。
图 1. Ext JS 表单示例

清单 2. Ext JS 表单示例的源代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

var top = new Ext.FormPanel({
labelAlign: 'top',
frame:true,
title: 'Multi Column, Nested Layouts and Anchoring',
bodyStyle:'padding:5px 5px 0',
width: 600,
items: [{
      layout:'column',
      items:[{
         columnWidth:.5,
         layout: 'form',
         items: [{
            xtype:'textfield',
            fieldLabel: 'First Name',
            name: 'first',
            anchor:'95%'
         }, {
            xtype:'textfield',
            fieldLabel: 'Company',
            name: 'company',
            anchor:'95%'
         }]
      },{
         columnWidth:.5,
         layout: 'form',
         items: [{
         xtype:'textfield',
         fieldLabel: 'Last Name',
         name: 'last',
         anchor:'95%'
      },{
         xtype:'textfield',
         fieldLabel: 'Email',
         name: 'email',
         vtype:'email',
         anchor:'95%'
      }]
}]
},{
      xtype:'htmleditor',
      id:'bio',
      fieldLabel:'Biography',
      height:200,
      anchor:'98%'
}],

      buttons: [{
      text: 'Save'
},{
      text: 'Cancel'
}]
});

top.render(document.body);

对话框和选项卡如所示，Ext JS 支持创建用于用户输入的模态对话框，还支持实现选项卡式用户界面，以便充分利用屏幕空间。图 2 中对话框的源代码见。
图 2. Ext JS 模态对话框和选项卡

清单 3. Ext JS 模态对话框的源代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

收藏分享评分

回复引用

订阅 TOP

返回列表