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

原创
2015/10/01 20:42
阅读数 5.3K

    对于从事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'}]
	});
});

运行结果如图:

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
2 收藏
0
分享
返回顶部
顶部