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>
