分享到：微信新浪微博QQ好友QQ空间腾讯微博复制网址

如果你用JavaScript为Web做编程，你或许听说过第三方库可以简化这一过程。本文将介绍大家使用一个更为通用的框架——Ext JS。你会为它的功能感到惊奇。

介绍

如你所知，Web是目前最大的开发平台。而这一现象在第三方JavaScript库主宰的领域尤为明显。当谈到构建全功能型JavaScript应用程序和创建固定用户界面时，Prototype，Scriptaculous，Yahoo！用户界面，jQuery等都是许多专业网络开发员首选的工具包。

然而，还有另一个工具包也十分突出，这主要是由于它在用整齐的，对象指向型JavaScript代码创建专业前端和交互式网络小部件方面具备稳定特性。这是一种可以提供大量预定义网络组件，包括表单和网格，消息框和分层树菜单等，这些组件可与任意已有网络应用程序融合。

事实上，与Ext JS数据包绑定的预建网络部件数量可能会过多，尤其是当你只需将其与一组动态消息框和一个简单联系表单整合到网页时。

因此，本文会为大家提供快速指导以帮助用Ext JS框架提供的JavaScript API构建不同种类的动态网络表单。其范围从简单的联系表单，到创建全功能型HTML编辑器。现在，让那个我们一起学习如何用Ext JS库创建动态网络表单。

创建一个简单的联系表单

谈到创建动态表单，其中一个好的方法是先向大家展示一下Ext JS框架的权限。我们给出的示例包括一些典型领域，如用户的姓名，用户所在的公司，相应的电子邮件地址，评论框以及用于输入当前时间的下拉菜单。

用纯粹的HTML创建如上所述的联系表单要求编写一些输入文本框，或许是一个“<select>”菜单，或是“<form>”标签。但是，如果你要用Ext JS库执行相同任务，所用的方法则完全不同。

首先，创建联系表单不需要结构上的标记，因为库会在页面加载后自动执行这一进程。所以，起初，所有构建该示例动态网络表单所需的标记都将如下所示：

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>Building Simple Dynamic Form with Ext JS</title>
<link rel=”stylesheet” type=”text/css” href=”ext-all.css”/>
<script type=”text/javascript” src=”ext-base.js”></script>
<script type=”text/javascript” src=”ext-all.js”></script>
<link rel=”stylesheet” type=”text/css” href=”forms.css”/>
<!– common styles for the examples –>
<link rel=”stylesheet” type=”text/css” href=”examples.css”/>
</head>
<body>
<h1>Dynamic Form built with Ext JS library</h1>
</body>
</html>

这是真正意义上的基础(X)HTML标记。如你所见，上述示例文件只在下载Ext JS库中的所有JavaScript和CSS文件时被执行，目的是在整个页面完成加载时创建联系网络表单。在这个特例中，所有存在问题的源文件都位于同一目录中。通常Ext JS库将这些源文件分配到不同位置，因此要确保你的网页是从正确目录下载这些文件。

我们已经告诉大家如何创建基础(X)HTML文件，该文件的主要任务是下载所有需要用来创建动态联系表单的Ext JS部件。下面我们要将之前的JavaScript代码包含进来以便创建网络表单。

下面是成功完成所有步骤的顺序：首先，必须在整个页面加载完后构建网络表单，然后必须为表单提供一组合适的新进参数。这些参数将被用来创建相应的输入文本框，以及必须提供给用户的规则验证和控件按钮。

按照最初的计划，下面的JavaScript代码执行了所有创建联系表单所需的任务。请注意：

Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = ‘side’;
// create simple dynamic form
var theform = new Ext.FormPanel({
labelWidth: 75,
url:’processform.php’,
frame:true,
title: ‘Simple Form built with Ext JS’,
bodyStyle:’padding:5px 5px 0′,
width: 350,
defaults: {width: 230},
defaultType: ‘textfield’,
// define form fields
items: [{
fieldLabel: ‘First Name’,
name: ‘first’,
allowBlank:false
},{
fieldLabel: ‘Last Name’,
name: ‘last’
},{
fieldLabel: ‘Company’,
name: ‘company’
}, {
fieldLabel: ‘Email’,
name: ’email’,
vtype:’email’
}, new Ext.form.TimeField({
fieldLabel: ‘Time’,
name: ‘time’,
minValue: ‘9:00am’,
maxValue: ‘5:00pm’
})
],
buttons: [{
text: ‘Save’
},{
text: ‘Cancel’
}]
});
// display the form
theform.render(document.body);
});

虽然上述代码明显比较复杂，但是却很容易被理解，因此让我们来解析一下。首先，你会看到所有用来创建样本联系表单的代码已经被Ext JS库中包含的方法所包裹起来，方法名称为“onReady()”。

我们这样做只是为了确保能在整个页面都下载并显示后构建网络表单。下面，要把注意力放在实际提供表单的代码部分了。在这个示例中，一个全新的类被用来完成这一任务，类名称为“FormPanel”。显然，这个类接受了一定数目的参数用于定义网络表单的指定方面，如网络表单的提交URL和标题，其默认宽度等等。

此外，动态联系表单的各个输入域都是通过一组允许你指定其名称和标识的项目来构造的。最后，使用“render()”方法可以将网络表单显示在浏览器上，如下面一行代码所示：

theform.render(document.body);

当这一步后，你已经学会如何通过Ext JS数据包提供的API创建一个简单的网络表单。我们截图来看一下所建立的网络表单外观。

现在，你应该明白创建专业化网络表单时Ext JS框架是多么有用了。不过，有一点要承认的是前面所学习的JavaScript代码如果被孤立起来分析则不容易理解，因为它必须与相应的结构标记融合才可以。因此，我们会列出创建该简单联系网络表单所需的完整源代码，这样，大家就可以将其直接粘贴到代码编辑器中使用：

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>Building Simple Dynamic Form with Ext JS</title>
<link rel=”stylesheet” type=”text/css” href=”ext-all.css”/>
<script type=”text/javascript” src=”ext-base.js”></script>
<script type=”text/javascript” src=”ext-all.js”></script>
<link rel=”stylesheet” type=”text/css” href=”forms.css”/>
<!– common styles for the examples –>
<link rel=”stylesheet” type=”text/css” href=”examples.css”/>
<script type=”text/javascript”>
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = ‘side’;
// create simple dynamic form
var theform = new Ext.FormPanel({
labelWidth: 75,
url:’processform.php’,
frame:true,
title: ‘Simple Form built with Ext JS’,
bodyStyle:’padding:5px 5px 0′,
width: 350,
defaults: {width: 230},
defaultType: ‘textfield’,
// define form fields
items: [{
fieldLabel: ‘First Name’,
name: ‘first’,
allowBlank:false
},{
fieldLabel: ‘Last Name’,
name: ‘last’
},{
fieldLabel: ‘Company’,
name: ‘company’
}, {
fieldLabel: ‘Email’,
name: ’email’,
vtype:’email’
}, new Ext.form.TimeField({
fieldLabel: ‘Time’,
name: ‘time’,
minValue: ‘9:00am’,
maxValue: ‘5:00pm’
})
],

buttons: [{
text: ‘Save’
},{
text: ‘Cancel’
}]
});
// display the form
theform.render(document.body);
});
</script>
</head>
<body>
<h1>Dynamic Form built with Ext JS library</h1>
</body>
</html>

看到这些完整的源代码，大家应该不存在理解上的困难了。当然，我们不能为大家提供创建这个网络表单的功能型示例，因为你必须单独下载Ext JS数据包。

结语

如你在之前所见到的，创建这个网络部件不需要任何额外的标识，如果脚本在浏览器中被禁用，标识就是一大弊端。