Ext Form全攻略1

1 Form概述
Formpanel是一个重要的页面组件，在具体的应用开发中，信息的添加和修改，数据的提交和加载， 都离不开formpanel的支持。Formpanel自动实现了form布局模式。
　　虽然没有列出的选项,配置FormPanel一样,FormPanel类还接受了所有的配置选项要求配置内部Ext.form.BasicForm为文件上传或提供的功能,验证并递交了加载形式。
　　注:如果子类FormPanel,任何配置选项为BasicForm必须适用于initialConfig FormPanel属性运用BasicForm设置这并不会影响到BasicForm的配置。
Basciform是一个有用的类，主要用来管理formpanel中的form元素，实现数据加载，获取，和数据集校验。

 

2 常用表单组件
继承关系分析如下：
 
在这里应该充分利用继承的特性，在父类已经定义了的属性，之类依然可以访问。
附：javascript本来没得类这个概念，但是JS得原型实现了类对象的功能，所以我们都称之为类。
下面针对常用的组件关键属性进行讲解。
2.1 Field
根据上面的分析图形可以看出，几乎所有的formpanel组件都是继承此类，其中有一个容易被忽略的属性：inputType。很多人可能会问：怎么没有看见密码组件，文件上传组件呢？这个属性就是解决这个问题的。
如果我们把inputType分别设置为password和file，则效果如图所示：
密码控件：      
文件上传：
ExtJS3.0中，新增了一个ux文件夹，专门收集用户扩展的控件，其中提供了对file控件的支持，具体例子参加example。
Value：这个属性的类型是mixed，意思就是说：和此控件的类型有关。

---常用属性---
Field是继承自boxComponent。我们知道component中有个属性是autoEl，此属性用来自定义创建组件的。比如要创建一个图片组件：
var myImage = new Ext.BoxComponent({
    autoEl: {
        tag: 'img',
        src: '/images/my-image.jpg'
    }
});
而这里的autoCreate是用来创建默认的文本组件的，默认值为：
{tag: "input", type: "text", size: "20", autocomplete: "off"}
Cls：自定义的样式作用于此控件
FieldClass：默认的样式作用于此控件 x-form-field
FocusClass：默认的获得焦点的样式 x-form-focus
InvalidClass：默认的校验样式 x-form-invalid
MsgTarget：当文本框中的值不满足校验时显示的提示方式
ReadOnly：使控件只读【如果要使得下拉控件只读，需要设置属性hideTrigger】

---重要方法---
GetName：获取name或者hiddenName
GetRawValue:如果是下拉框，则获取下拉框中显示的值，而非value。同理：setRawValue
Reset：单一的一个控件也可以reset。

Change事件可以监控值得更改。
2.2 Textfield
Grow：设置文本输入域的长度是否随着文本的变化而变化，伴随着的2个属性分别为：growMax和growMin，最长的长度和最短的长度。适用于一个文本输入域占一行的布局模式。
SelectOnFocus：如果设置为true，则当此文本域获得焦点的时候，选中已经存在的文本，如图所示：
 
EmptyText：为空的时候，显示的值
EmptyClass：为空的时候的样式 'x-form-empty-field'
MaskRe：屏蔽的正则表达式
Validator：function【校验函数，返回值为true则通过，没通过返回string】
SelectText：选中文本。
2.3 Triggerfield
Editable：是否可以编辑，如果设置为false，则不接受用户输入，可以实现鼠标点击文本域就出现下拉列表的效果。本来在field中定义了一个叫：readOnly的属性，这就是为什么还要定义此属性的原因。
HideTrigger：隐藏后面的那个图片按钮，这某些只读模式下浏览数据很有用。
OnTriggerClick：如果你想自己定义小图标点击事件，请为按钮添加这个事件并实现自定义需求。
2.4 Numberfield
DecimalPrecision：自动计算精确到小数点后几位，一个很有用的属性
MaxValue，minValue：最大值和最小值
2.5 DisplayField
作为3.0里面新增加的一个控件，主要是用来数据浏览。
HtmlEncode：是否接受html标签。
2.6 Label
Html：接受html标记的字符串。
Text：不接受html标记的字符串。
所以设置值得时候，setText有2个参数，第一个表示值，第二个表示是否接受html标记。
2.7 Datefield
DisabledDates：将一些指定的日期失效（不可选取），指定方式也是灵活多变的，具体方式可以参照API文档，这里写出来，这是告诉大家，有这么一个属性，可以方便的帮你实现一些页面控制。
DisabledDays：指定星期几失效。0-6
MaxValue，minValue：最大的有效日期
ShowToday：是否显示今天，就是下面那个小按钮。
2.8 TimeField
Increment：默认为15
MaxValue，minValue：最大值和最小值
2.9 Checkbox
boxLabel：显示在复选框傍边的文本
checked：是否被选中
handler：函数，有个参数：第一个是checkbox，组件本身；第二个checked，选中状态
scope：函数的执行范围
getValue：获取复选框的状态，为true或者false
setValue：true, 'true', '1', or 'on' 设置为选中，其余的则不选中
2.10 Radio
继承自checkbox。
inputValue：单选框的值，如果设置了name，使用getGroupValue()时，获取的就是这个值。
如果要为一组单选按钮添加事件，则使用如下的方法比较简单：
 
2.11 CheckboxGroup
继承自field。Xtype：checkboxgroup
Columns：列数，按照几列来分配checkbox【 String/Number/Array】
Items：里面是checkbox的集合
Vertical：是否垂直分布控件
 
2.12 RadioGroup
继承自checkboxgroup。Xtype：radiogroup
GetValue：获取选中的组件，是一个组件。
SetValue（String/Ext.form.Radio id, Boolean value）：为指定的某个组件设置值
2.13 TriggerField
HideTrigger：是否隐藏后面的小按钮
TriggerClass：小按钮的图标 'x-form-trigger'
TriggerConfig：
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass}
onTriggerClick：点击小按钮的事件处理
【API通过继承实现了搜索的下拉框】
2.14 Combobox
这个控件可能是使用频率最高的，也是最容易出问题的，这个控件不是传统的文本域的渲染，有继承关系可以看出，这个控件是由一个文本域加一个图片按钮组合而成的。
ForceSelection：强制使显示在文本域中的文本是下拉列表中存在的
MaxHeight：下拉列表的最大高度
Mode：关键属性，必须定义的，分为local和remote，分别代表读取本地数据还是远程数据，如果是远程数据，下拉列表就会显示loadingText.
Shadow:是否显示阴影，如果设置为true，需要多在页面上添加4个div层。
triggerAction：指定如何搜索显示列表数据，query和all
typeAhead：在输入的时候是否把第一匹配项自动选择到文本框中
title：是否为列表添加一个标题
displayField：显示的文本
valueField：提交到后台的值
hiddenValue：初始化的默认值
lazyInit：是否默认不初始化列表（性能优化）
lazyRender：是否延迟渲染，一般在使用编辑控件的时候使用，Ext.Editor
itemSelector：使用tpl的时候，必须使用的属性，默认为：'x-combo-list-item'
listAlign：列表的显示位置
listEmptyText：当列表没有数据的时候显示的文本
store，tpl：重要属性
valueNotFoundText：没有找到相应值的时候，显示的文本，默认为空
view：dataView对象，combox选项是实现的数据视图
lastQuery：String，强制重新查询。
 
 
【重要方法】
ClearValue：清楚当前选中的数据
Expand和collapse：展开和收缩列表
DoQuery：对下拉数据列表执行SQL数据查询，和lazyQuery属性相关
GetStore：返回下拉框的数据源
GetValue：获取选中的值  【setValue】
SelectByVlaue：String value, Boolean scrollIntoView ，表示是否滚动到相应的数据
Select：Number index, Boolean scrollIntoView，选中item的索引
事件监听包括：expand，collapse，select，beforesleect，beforequery

 

（文中有些图片没上传）