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,
                 200,
                frame: true,
                collapsible: true,
                renderTo: Ext.getBody(),
                defaults: {
                    autoFitErrors: "false",
                    labelSeparator: "：",
                    labelWidth: 50,
                     150,
                    allowBlank: false,
                    blankText: "必填",
                    msgTarget: "qtip"
                },
                items: [{
                    xtype: "textfield",
                    fieldLabel: "姓名"
                }, {
                    xtype: "numberfield",
                    fieldLabel: "年龄"
                }]
            });
        });
    </script>
</head>
<body style="margin: 30px">
</body>
</html>

效果图：