Ext.form.Panel表单面板各组件介绍

1、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.field.FieldContainer 字段容器 fieldcontainer
Ext.form.field.FieldSet 字段集 fieldset
Ext.form.field.Hidden 隐藏域 hiddenfield
Ext.form.field.HtmlEditer 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

2、Ext.form.Panel主要配置项目表

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

3、Ext.form.FormPanel常用方法表

方法名 说明
checkChange:void 强制检查每个表单字段是否发生了变化
getForm():Ext.form.BasicForm 获取表单面板对应的基本表单对象
load(Object options):void 加载表单内容
startPolling(Number interval):void

开始循环检查表单值是否发生了变化

参数说明:

interval:循环检查的时间,单位ms

stopPolling:void 停止startPolling启动的内置任务
submit(Object options):void 提交表单内容

4、Ext.form.field.Base主要配置项目表

配置项 类型 说明
dirtyCls String 设置表单值被修改后的样式
fieldCls String 设置表单字段的样式,默认为“x-form-field”
focusCls String 设置表单字段获得焦点时的样式,默认为“x-form-focus”
id String 控件的唯一标识,默认系统自动生成一个唯一标识
inputId String 这个id将被应用于生成的input元素,默认情况下这个id自动生成,如果手工配置id则需保证这个id的唯一性
invalidText String 设置表单值无效且并没有提供信息时的显示文字
inputType String 字段类型,默认为text
name String 字段名,默认为undefined
readOnly Boolean 设置字段是否只读,默认为false。
Mixin:Ext.form.field.Field
disabled Boolean true则禁用组件,默认为false。禁用状态下的组件将不被提交
submitValue Boolean 设置表单字段非禁用状态下是否提交表单值,默认为true
validateOnChange Boolean 设置是否在值发生变化时立刻校验的有效性,默认为true
value Mixed 字段的初始化值
Mixing:Ext.form.Labelable
activeError String 如果设置该值,则组件第一次被渲染时该值将被作为错误信息展示,默认为undefined,组件创建之后可以使用setActiveError和unsetActiveError进行修改
activeErrorTpl Ext.XTemplate 错误信息模板
autoFitErrors Boolean 设置为true则自动调节组件体范围,以便在组件范围内显示“side”或“under”状态的错误信息,默认为true
fieldLabel String 设置字段标签,它将与labelSeparator一起被添加,它的位置尺寸决定于labelAlign,labelWidth和labelPad配置项,默认为undefined
hideEmptyLabel Boolean 设置为true则完全隐藏内容为空的标签
hideLabel Boolean 设置为true则完全隐藏表单标签(fieldLabel和labelSeparator),默认为false
labelAlign String

设置表单标签filedLabel的位置,

有效值:left:

标签在字段左边。top:

标签在字段上面。

right:标签在字段右边。

labelPad Number 设置表单标签与表单字段值之间的空白间距,默认为5px
labelSeparator String 设置表单标签与表单字段之间的分隔符
labelStyle String 设置一个直接应用于标签元素的样式字符串,默认为undefined
labelWidth Number 设置表单标签宽度,仅当labelAlign设置为“left”或“right”时生效,默认为100px
labelableRenderTpl Array/String/Ext.Template 表单标签模板
msgTarget String

设置错误信息提示位置,

有效值包括:

qtip:显示一个浮动的提示消息

title:显示一个浏览器浮动提示消息

under:在字段下面显示一个提示消息

side:在字段右边显示一个提示消息

none:不显示提示消息

[element id]:直接将错误消息添加到指定元素的innerHTML属性

preventMark Boolean true则不显示错误消息,默认为false

5、简单实例

代码:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Ext.form.Panel</title>

    <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />

    <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>

    <script type="text/javascript">

        Ext.onReady(function () {

            Ext.QuickTips.init();

            var form = new Ext.form.Panel({

                title: "表单",

                height: 120,

                width: 200,

                frame: true,

                collapsible: true,

                renderTo: Ext.getBody(),

                defaults: {

                    autoFitErrors: "false",

                    labelSeparator: ":",

                    labelWidth: 50,

                    width: 150,

                    allowBlank: false,

                    blankText: "必填",

                    msgTarget: "qtip"

                },

                items: [{

                    xtype: "textfield",

                    fieldLabel: "姓名"

                }, {

                    xtype: "numberfield",

                    fieldLabel: "年龄"

                }]

            });

        });

    </script>

</head>

<body style="margin: 30px">

</body>

</html>


 

 

你可能感兴趣的:(Panel)