[ExtJs5.1.0系列-第6天]Form表单之表单面板(Ext.form.Panel)

对于从事Web开发的程序员来说，接触最多的就是表单的操作。传统的HTML表单给人一种功能单一风格朴素的印象。这个问题在ExtJs的表单上有了很大程度的改善，ExtJs对于常用表单功能给出了优秀的实现，不但美观而且稳定。接下来会对ExtJs表单的主要功能及组件进行详细的介绍。

1. 表单及表单元素

表单在Web应用中处于非常重要的地位，我们时刻都在使用表单收集用户信息与用户交互，并将收集到的有用信息提交到后台服务端，表单是客户端与服务端之间通信的主要桥梁。

ExtJs表单不但可以实现HTML标准表单的全部功能，还提供了大量的扩展特性:

(1)表单的异步提交

(2)可配置的表单数据验证

(3)可配置的表单错误信息提示

(4)对特殊数据(数组、日期、时间等)输入组件的支持

‍2. Ext.form.Basic基本表单‍

Ext.form.Basic是基本的表单组件，提供了字段管理、数据验证、表单提交、数据加载等功能，它可以作用与Ext.container.Container容器，但推荐使用Ext.form.Panel作为表单容器。Ext.form.Panel会自动关联到Ext.form.Basic示例，方便进行字段的配置。

3. Ext.form.Panel表单面板

ExtJs的表单面板组件Ext.form.Panel，本质是一个标准的Ext.panel.Panel(面板)，是表单项的容器，它内置并自动创建了Ext.form.Basic基本表单组件，用来管理表单项(Ext.form.Field)，Ext.form.Panel支持Ext.form.Basic的所有配置内容。

Ext.form.Panel默认使用anchor布局，并且可以方便地替换为其他任何标准布局。

Ext.form.Panel与HTML原始表单布局表现形式不同，对表单的操作及处理也不相同，这些不同主要表现在表单的提交方式、表单的验证和对表单组件的支持3个方面。

(1)表单提交方式

HTML原始表单(form)使用form.submit()的方式进行提交，这种提交方式是同步进行的，会导致浏览器页面的跳转，打断用户操作，降低用户体验。而Ext.form.Panel(表单面板组件)采用Ajax方式进行异步表单提交，不会导致浏览器页面的跳转，不会打断用户的操作，有利于改善用户体验。

(2)对表单验证的支持

HTML原始表单并不支持表单组件的验证功能，在需要进行验证的场合程序员需要编写相应的验证代码，并在表单提交前进行调用以保证提交数据的正确性。而Ext.form.Panel已经支持了常见的表单验证功能，只需要在组件上进行必要的配置就可以实现对该组件输入数据的验证，并且这个验证是不需要程序员手工调用的，在表单提交之前会自动调用验证功能，并对出现错误的输入给出相应的提示。

(3)对表单组件的支持

HTML原始表单支持的表单组件和Ext.form.Panel支持的表单组件非常不同，Ext.form.Panel支持的表单组件全部是经过ExtJs封装之后的组件对象，具有更多的高级功能。

以下列出Ext.form.FormPanel支持的主要表单组件

ExtJs表单组件	说明	xtype类型
Ext.form.field.Checkbox	复选框	checkboxfield
Ext.form.CheckboxGroup	复选框组	checkboxgroup
Ext.form.field.ComboBox	下拉列表框	combo
Ext.form.field.Date	日期选择框	datefield
Ext.form.field.Display	文本展示组件	displayfield
Ext.form.FieldContainer	字段容器	fieldcontainer
Ext.form.FieldSet	字段集	fieldset
Ext.form.field.Hidden	隐藏域	hiddenfield
Ext.form.field.HtmlEditor	HTML文本编辑器	htmleditor
Ext.form.Label	标签字段	label
Ext.form.field.Number	数字输入框	numberfield
Ext.form.field.Radio	单选框	radio
Ext.form.RadioGroup	单选框组	radiogroup
Ext.form.field.Spinner	微调组件	spinnerfield
Ext.form.field.TextArea	多行文本框	textareafield
Ext.form.field.Text	单行文本框	textfield
Ext.form.field.Time	时间选择框	timefield
Ext.form.field.Trigger	触发按钮文本框	triggerfield
Ext.form.field.File	文本上传字段	filefield

以下列出Ext.form.Panel的重要配置项及常用方法

配置项	类型	说明
buttons	Array	一个按钮(Ext.button.Button)配置对象的数组，按钮将被添加到表单页脚当中
layout	String	表单布局，默认为anchor
minButtonWidth	Number	表单按钮的最小宽度，默认为75像素
pollForChanges	Boolean	是否循环检查表单值得变化
pollInterval	Number	循环检查表单值的时间间隔，默认为500毫秒
items	Mixed	一个子元素或子元素的数组
title	String	表单标题

下面我们将创建一个form表单容器

Ext.onReady(function() {
	var form = Ext.create('Ext.form.Panel', {
		renderTo: 'form',
		title: '表单测试',
		height: 300,
		width: 380,
		defaults: {
			labelSeparator: ':',
			labelAlign: 'right',
			allowBlank: false,
			blankText: '不允许为空',
//			msgTarget: 'qtip' 		//显示一个浮动的提示信息
//			msgTarget: 'title'		//显示一个浏览器原始的浮动提示信息
//			msgTarget: 'side'		//在字段下方显示一个提示信息
			msgTarget: 'under'		//在字段的右边显示一个提示信息
//			msgTarget: 'errorMsg'	//在指定id的元素内显示提示信息
		},
		items: [
			{xtype: 'textfield', fieldLabel: '姓名'},
			{xtype: 'numberfield', fieldLabel: '年龄', minValue: 1}
		],
		buttons: [{text:'Submit'}, {text:'Reset'}]
	});
});

运行结果如图: