Form组件
1.根类
Ext.form.Basic
提供了表单组件,字段管理,表单提交,数据加载的功能
2.表单的容器
Ext.form.panel
容器自动关联 Ext.form.Basic的实例对象,更方便的进行字段的配置
重要属性
defautType : "" （设置默认子项的xtype）
3.数据交互和加载
Ext.form.action.Action（两种表单自身的提交方式）
Ext.from.action.Submit Ajax方式提交
Ext.form.action.StandardSubmit 原始鼻癌单提交方法
Ext.form,action.DirectLoad
Ext.form.action.DirectSubmit 类似于dwr的方式提交
4.字段的类型
Ext.form.field.Base 根类
混入了的类[Ext.form.field.Field]得到表单的处理功能
混入了的类[Ext.form.Labelable]得到表单标签错误信息提示功能
Ext.form.field.Text 文本框方式的如下：
Ext.form.field.TextArea 富文本域
Ext.form.field.Trigger 触发器
Ext.form.field.Picker 触发器子类（选择器）
Ext.form.field.Time
Ext.form.field.Date
Ext.form.field.Number
Ext.form.field.file 文件上传
Ext.form.field.ComboBox 选择框
Ext.form.field.Checkbox 选择框方式的
Ext.form.field.Radio 单选框
Ext.form.field.Hidden 特殊的--隐藏字段（数据页面不显示，但后台需要）
Ext.form.field.HtmlEditor 特殊的--文本编辑框
5.其中夹杂布局的类
Ext.form.FieldContainer
Ext.form.CheckboxGroup
Ext.form.RadioGroup
Ext.form.Label
Ext.form.Labelable
Ext.form.FieldSet
Ext.form.fieldContainer (里面可以放多个表单项，进行统一布局)
6.常用的组件配置
Ext.form.Panel
重要的配置项
title:'',
bodyStyle:'',
frame:true,
height:122,
width:233,
renderTo:'',
defaultType:'',
defaults:{
allowBanlk:true,
msgTarget:'side',
pageSize:4 //配置这个参数即可在下拉框内一分页的形式操作数据
},
由于混入了Ext.form.labelable所以可进行如下配置；
labelSeparator 字段的名称与值直之间的分隔符
labelWidth 标签宽度
Ext.form.field.Text 文本框(xtype:textfield)
重要配置项
width:156,
allowBlank:false,//不能为空
labelAlign:'left',
msgTarget:'side' //在字段的幼斌展示提示信息
grow:false,//是否在这个表单字段规定长度内，自动根据文字的内容进行伸缩
selectOnFocus：true, //当字段的内容得到焦点的时候，选择所有文本
regex : /\d+/g,
regexText : '请输入数字',
inputType:'password',//其它类型：email、url等。默认text
//vType:'IPAddress'用于数据校验,Ext.form.field.VTypes
//如果校验不是你想要的，可以自定义，如下：
//custom Vtype for vtype:'IPAddress'
Ext.apply(Ext.form.field.VTypes, {
IPAddress: function(v) {
return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
},
IPAddressText: 'Must be a numeric IP address',
IPAddressMask: /[\d\.]/i //不符合正则的，键盘整么输入，都不起作用
});
Ext.form.field.Number
重要的配置项
allowDecimals：false,//不能输入小数
hideTrigger:true,//隐藏框帮边的调节按钮
decimalPrecision : 3,//自动四舍五入,保留小数位为3位。
emptyText：'请输入小数'//默认框内灰色提醒
//指定范围
minValue:10,
maxValue:100,
baseChars:'01',//表示框内只能输入0和1
step:'0.8',//指定步长
Ext.form.field.ComboBox
Ext.view.BoundList 约束列表
重要属性
listConfig：{
//规划下拉框到底是什么样的样式
//这里面的值是根据BoundList里面的属性进行初始化的
getInnerTpl:function()
{
return "<div style='color:red'>${name}</div>";//动态改变下拉框内容样式
}
}
queryMode:'remot', //local(本地数据)|remot(远程数据)
valueFiled:'id',//后台需要
displayField:'name'//页面显示的
forceSelection:true, //必须选中数据集合中有的数据
minChars:2,//表示输入2个字符的的时候，就到后台请求数据
queryDelay:400,
queryParam:'name',//指定往后台传入的参数名称,对应的参数值是你输入的参数
multiSelect:true, //允许多选
typeAhead:true, //自动补全
Ext.form.field.Date
重要属性
disableDays:[0,6] //周日与周六不能选为灰色
7.常用事件
当字段类型为xtype:'triggerfield',它具有onTriggerClick事件，
经常用于从其它弹出表格中选择某个值。
8.常用操作
获取表单中某项的值
var fieldValue = Ext.getCmp('表单id').getForm().findField('字段名称').getValue();
自动填充表单的各项值
loadRecord( Ext.data.Model record) : Ext.form.Basic
Loads an Ext.data.Model into this form by calling setValues with the record data. See also trackResetOnLoad.
