文档章节

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

LvSantorini
 LvSantorini
发布于 2015/10/01 20:42
字数 1313
阅读 2259
收藏 2

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

运行结果如图:

© 著作权归作者所有

LvSantorini
粉丝 13
博文 37
码字总数 40332
作品 0
呼和浩特
程序员
私信 提问
Sencha touch表单标题太长被部分隐藏的一种解决方式

/** * The Form panel presents a set of form fields and provides convenient ways to load and save data. Usually a form * panel just contains the set of fields you want to display......

周伟东
2013/07/30
1K
1
[ExtJs5.1.0系列-第1天] 初识ExtJs5.1.0

ExtJs是用JavaScript、CSS和HTML等技术实现的主要用于创建用户界面,且与后台技术无关的前端Ajax框架,还被用来开发RIA(富客户端)的Web应用。ExtJs的使用与Java中AWT,Swing编程十分相像(做过...

LSantorini
2015/09/08
1K
0
谈谈Ext JS的组件——布局的使用方法续二

绝对布局(Ext.layout.container.Absolute) 绝对布局让我回想到了使用Foxpro开发的时候,哪时候的界面布局就是这样,通过设置控件的左上角坐标(x,y)和宽度来进行的,因为输入控件的 高度...

tianxiaode2008
2015/06/27
0
0
jQuery EasyUI使用教程之创建展开行详细编辑表单的CRUD应用

当切换datagrid视图到"detailview"时,用户可以展开一行来显示该行下面的任何详细信息。此功能允许用户为放置在行详细信息面板中的编辑表单提供恰当的布局。在本教程中,我们使用DataGrid组件...

Miss_Hello_World
2015/10/14
331
0
表单验证第四部分: MailChimp订阅表单中的验证

表单验证第四部分: MailChimp订阅表单中的验证 W3CPlus2017-08-0716 阅读 表单验证 在这个系列的上几篇文章中, 我们已经学会了如何使用输入类型和验证属性本地进行表单验证。 我们也学会了如...

W3CPlus
2017/08/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

15、SpringMVC进行json交互

SpringMVC进行json交互 json数据格式在接口调用中、html页面中较常用,json格式比较简单,解析还比较方便。 请求json、输出json。要求请求的是json串,前端页面中需要将请求的内容转成json,...

快乐的瓶子
28分钟前
6
0
delphi版插apc杀进程驱动源码

从c代码转的,备份一下,里面有硬编码unit MyDriver;{$HINTS OFF}{$WARNINGS OFF}interfaceusesnt_status, ntoskrnl, native, winioctl, fcall, macros;typeTKILL = ...

simpower
32分钟前
4
0
带你上手一款下载超 10 万次的 IDEA 插件

作者 | 倪超(银时) 阿里云开发者工具产品专家 本文整理自 11 月 7 日社群分享,每月 2 场高质量分享,点击加入社群。 导读:Cloud Toolkit 是本地 IDE 插件,帮助开发者更高效地开发、测试...

阿里云官方博客
32分钟前
4
0
GMAT语法7个常考重要考点分析

GMAT语法考点多,并非所有考点都值得重点关注。实际上GMAT语法存在一些高频考点,考生需要优先掌握它们才能更好地保证得分。同时GMAT备考中大家还需要培养连续做题的耐力。下面小编就来做具体...

bole6
37分钟前
4
0
最佳实践 | RDS & POLARDB归档到X-Pack Spark计算

X-Pack Spark服务通过外部计算资源的方式,为Redis、Cassandra、MongoDB、HBase、RDS存储服务提供复杂分析、流式处理及入库、机器学习的能力,从而更好的解决用户数据处理相关场景问题。 RD...

一肥仔
38分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部