ExtJs 第二章，Ext.form.Basic表单操作

1、认识Ext.form.Panel表单面板

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.field.RadioGroup 单选框组 radiogroup
Ext.form.field.Spinner 微调组件 spinnerfield
Ext.form.field.TextArea 多行文本框 textareafield
Ext.form.field.Text 单行文本框 textfield
Ext.form.field.Time 事件选择框 teimefield
Ext.form.field.Trigger 触发按钮文本框 triggerfield
Ext.form.field.File 文件上传字段 filefield

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

buttons Array 一个按钮（Ext.button.Button）配置对象的数组，按钮将被添加到表单的页脚当中示例：buttons:[{text:"Button1"}]
layout String 表单布局，默认为anchor
minButtonWidth Number 表单按钮的最小宽度默认为75px
pollForChanges Boolean 是否循环检查表单值的变化
pollInterval Number 循环检查表单的时间间隔，默认为500毫秒
items Mixed 一个子元素或子元素的数组
title String 表单标题

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

checkChange:void 强制检查表单每个字段是否发生了变化
getForm():Ext.from.BasicForm 获取表单面板对应的基本表单对象
load(Object options):void 加载表单内容，该方法是Ext.form.Basic-load的代理
startPolling(Number interval):void 开始循环检查表单是否发生了变化参数说明：循环管检查的时间，单位是毫秒
stopPolling:void 停止startPolling启动的内置任务
submit(Object options):void 提交表单内容，该方法是Ext.form.Basic-submit的代理

4、Ext.form.field.Base基础表单字段,及主要配置项目表

　　主要提供对表单一般功能的支持，包括默认事件的处理、渲染、公共功能的定义等表单的必须的属性。它通过混入(mixin)Ext.from.field.Field获得表单的处理和验证功能，通过混入(mixin)Ext.from.field.Labelable 获得了标签错误信息的显示功能。大多数情况下都是使用它的子类例如：Ext.form.field.Text、Ext.form.field.Checkbox 不是直接创建Ext.form.field.Base的实例。如果需要创建自定义的表单Ext.from.field.Base

dirtyCls String 设置表单值被修改后的样式
fieldCls String 设置表单字段的样式默认为'x-form-field'
foucsCls String 设置表单字段获得焦点时的样式 'x-form-foucs'
id String 控件的唯一标示，默认系统会自动生成一个唯一标示
inputid String 这个id将会被应用于生成的input元素
invalidText String 设置表单字段值无效并且没有提供信息时的文字
inputType String 字段类型默认为text
name 字段名（字段提交到后台的名称）默认为undefined
readOnly Boolean 设置字段是否是只读

5、混入Ext.form.field.Field

　　mixin:Ext.form.field.Field

disabled Boolean true为禁用组件，禁用状态下的组件不能被提交
submitValue 设置表单字段非禁用状态下是否提交表单值默认为true
validateOnChange 设置值在发生变化时，是否立即校验值的有效性默认为true
value 字段的初始化值

6、混入Ext.form.Labelable

　 mixin:Ext.form.Labelable

activeError String 如果设置该值，组件在第一次被渲染时，该值被作为错误信息展示默认为Undefined 组件创建之后可以通过 setActiveError或unsetActiveError进行修改
activeErrorsTpl Ext.XTemplate 错误信息模板
autiFitErrors Boolean 设置是否自动调节组件体的范围，以便在组件范围内显示'side'或'under'状态的错误信息，默认为true
fieldLabel String 设置字段标签，它将同labelSparator一起被添加，它的位置决定于labelAlign，labelWidth和labelPad配置项，默认为undefined
hideEmptyLabel Boolean 设置为true则自动隐藏内容为空的标签
hideLabel 设置为true则完全隐藏表单标签（fieldLabel和labelSeparator）默认为false
labelAlign String 设置表单标签fieldLabel的位置：left,right,top
labelPad Number 设置表单标签和表单字段之间的空白距离，默认为5像素
labelSeparator String 设置表单标签和表单字段之间的分隔符，默认为undefined
lableStyle String 样式字符窜，默认为undefined
labelWidth Number 设置表单标签的宽度仅当labelAlign设置为left或right时生效，默认为100像素
labelableRebderTpl Array/string/Ext.XTmplate 表单标签模板
msTarget String 设置错误信息提示位置，包括：qtip:显示一个浮动的提示信息，title：显示一个浏览器的浮动提示信息，under:在字段下方显示一个提示信息，side:在字段的右边显示一个提示信息，none：不显示提示信息,[element id]:直接将错误信息添加到指定的元素的innerHTML属性
preventMark Boolean true则不显示错误信息默认为false

创建表单 ExtJs 第二章，Ext.form.Basic表单操作

8、Ext.from.field.Text组件主要配置项目表

　　Ext.from.field.Text组件扩展自Ext.form.field.Base它是一个基本的文本输入字段，可以直接用来代替input type="text"

allowBlank Boolean 是否允许为空，默认为true
blankText String 验证失败后显示的提示信息
disableKeyFilter Boollean 设置为true 则禁用键盘输入过滤
emptyCls String 设置应用空字段的样式默认是“x-form-empty-field”
emptyText String 在一个空字段中默认显示的信息
enableKeyEvents Boolean 是否启用按键事件代理默认为false
enforceMaxLength Boolean 是否强制限制输入的最大长度默认为false
grow Boolean 是否随着内容的增多而自动增长默认为false
growMax Number 字段生长的最大宽度，默认为800
growMin Number 字段生长的最小宽度，默认为30
makRe RegExp 一个输入掩码的正则表达式，它将过滤掉不匹配的键盘输入
maxLength Number 允许输入的最大长度默认为 Number.MAX_VALUE
regex RexExp 一个用于验证的javascript正则表达式
regexText String 正则表达式验证失败后的提示信息，默认为空
selectOnFocus Boolean 文本框获取焦点的时候是否选中文字默认为false
stripChartsRe regExps 去除字符正则表达式，过滤掉不希望出现的字符
validator Function 一个自定义的验证函数，当前值被传入，验证通过返回trur否则返回错误信息
vtype String 一个自定义类型的名字
vtypeText String 一个自定义的提示信息，用来代替vtype本身的提示信息

 1 //登录表单
 2         var form2_login = new Ext.form.Panel({
 3             title: "Ext.from.field.Text示例", //表单标题
 4             bodyStyle: "padding:5 5 5 5", //表单边距
 5             frame: true, //是否渲染表单
 6             height: 150, // 高度
 7             width: "auto", //宽度
 8             renderTo: "form2", //渲染到 [element id]
 9             defaultType: "textfield", //设置表单的默认类型
10             defaults: {//同意设置表单属性的默认属性
11                 lableSeparator: ":", //分隔符
12                 labelWidth: 50, //标签宽度
13                 width: 150, //字段宽度
14                 allowBlank: false, //是否允许为空
15                 labelAlign: "left", //对齐方式
16                 msgTarget: "side"//在字段右边显示一个提示信息
17             },
18             items: [
19                 {
20                     fieldLabel: "用户名", //显示的值
21                     name: "userName", //name提交到后台的name
22                     selectOnFocus: true, //获取焦点之后是否选中文本
23                     regex: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/, //邮箱的正则
24                     regexText: "邮箱格式不正确"//验证错误之后的提示信息
25                 },
26                 {
27                     name: "password",
28                     fieldLabel: "密码",
29                     inputType: "password"//设置输入类型为password
30                 }
31             ],
32             buttons: [
33                 {
34                     text: "登录",
35                     handler: function () {
36                         form2_login.form.setValues({ userName: "xulei@com", password: "123456" })
37                     }
38                 }
39             ]
40  
41         }); //登录表单

登录表单