首页 > Web开发 > 详细

[ExtJs5.1.0系列-第6天]Form表单

时间:2015-10-01 21:51:49      阅读:310      评论:0      收藏:0      [点我收藏+]

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

1. 表单及表单元素

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

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

    (1)表单的异步提交

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

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

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

1.1 Ext.form.Basic基本表单

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

1.2 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.HtmlEditorHTML文本编辑器htmleditor
Ext.form.Label标签字段label
Ext.form.field.Number数字输入框
numberfield
Ext.form.field.Radio单选框radio
Ext.form.RadioGroup单选框组radiogroup
Ext.form.field

















[ExtJs5.1.0系列-第6天]Form表单

原文:http://my.oschina.net/LvSantorini/blog/513125

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!