Ext Form全攻略2

3 技巧与优化
3.1 特殊效果（下划线）
 
3.2 defaults属性妙用
我们知道，panel中显示的任何元素都会不自觉的参与布局管理，那么如果设置，才能使得代码简洁和清晰呢？defaults属性是设置当前布局管理器中items各个元素的属性，如果可以充分利用这一点，我们就可以优化很多代码,先看例子：
 
实现如图所示的效果，相信大家使用常规的代码都可以实现，使用column布局。看看优化后的代码：
 
通过使用defaults属性，确实简化了很多代码，注意到画红色下划线的那行代码，分析可知，这行代码是作用到items各个子项的属性，认真的思考属性的使用技巧，可以帮助我们简化代码。
3.3 contentEl属性详解
在第二章的时候，我们已经详细的介绍了ext中关键的类，以及作用。Panel是继承container的，panel中有一个属性是：contentEl，作用的是指定一个已经存在的html节点的id来作为panel的body。该动作发生在panel渲染完成后，而且如果panel中有html属性，则该id的内容插入在html内容之后。操作的实质是：对页面上一个已经存在的dom节点的移动。于是我们可以分析此加载进来的dom节点的属性：不参与panel的任何布局管理。
由于这样移动添加dom节点，所以避免在渲染过程中出现短暂的抖动，建议在dom的样式中添加：x-hidden  或者 x-hidden-display。
3.4 panel结构解析
下面我希望用一个图示来解析panel的结构，清晰的结构，可以帮助我们快速灵活的使用panel
 
而且各个区域的属性默认配置如下，了解这一点，有助于我们应用和修改外观：
HeaderCls：baseCls+‘-header’
HeaderTextCls：baseCls+‘-header-text’
BodyCls：baseCls+‘-body’
TbarCls：baseCls+‘-tbar’
BbarCls：baseCls+‘bbar’
FooterCls：baseCls+‘-footer‘
需要说明的一点是：footer这个元素，如果声明了buttons，则自动创建footer，否则不会。而且也可以自己配置上面的对象
HeaderCfg：配置header
BodyCfg：配置body
FooterCfg：支持domhelper生成的片段
3.5 panel样式
ext中的css操作，其实是非常严谨的，要清晰的认识，需要一定得时间，下面分析几个常用的样式。
Unstyled：3.0新增的一个属性，表示不适用样式，效果等同于baseCls：‘x-plain’。是否使用样式，如果设置为true，则不使用样式
Frame：如果设置为true，就会在页面上添加9个div来渲染panel的4边，使其更加圆滑好看。
BaseCls：相当于是容器的一个基础样式库，如果设置为：x-plain，则不使用样式，和unStyled：true等价
3.6 form布局的属性
form布局有3个属性：
labelSeparator：标签和组件之间的字符串
labelStyle：标签的样式
fieldTpl：组件的模板
 
formpanel中有一些属性是作用在items中的各个项的，而且都是作用于子容器内的控件，但是这些属性都可以通过重载实现，这些属性需要常记。
HideLabels：是否隐藏标签
LabelAlign：标签的位置
LabelPad：标签的内补丁，如果没有指定labelWidth则忽略此标签
LabelWidth：标签的宽度
LabelSeparator:标签的间隔标志
Anchor：这个属性是在component中定义的，而且form布局是继承anchor布局的。
Items，也有一些公共属性，这些属性表示：只要放在form的items中，都具备的属性：
ClearCls：空白处的样式，和form布局的一个属性fieldTpl有关
FieldLabel：标签
HideLabel：是否隐藏标签
ItemCls：item的样式
LabelSeparator：标签与组件之间的字符串
LabelStyle：标签的样式
3.7 formPanel与basicForm
basicForm的基本重要属性如下：
trackResetOnLoad：当调用reset方法的时候，是读取最后一次修改的还是第一次加载的，默认为false。
Add：方法，添加field组件
Remove：删除一个field组件
FindField：根据组件ID查找组件
getValues：如果参数为false，则返回json，如果为true，则返回string
loadRecord：加载record，设置数据
updateRecord：修改record的值
isDirty：record是否被修改
isValid：是否通过了校验

3.8 Vtype验证
Ext默认提供了4中验证模式：alpha，alphanum，email，url
除此之外还可以自定义扩展vtype类型。
 
3.9 校验机制
从Formpanel的验证机制，可以看出ext实现验证模式，首先，在ext中实现了多重验证模式，这些很多验证之间，肯定存在着一个顺序，下面我们直接给出顺序：
1，validator
2，内置校验（allowblank，minLength，maxLength）
3，vtype
4，regex（regexText）

 

（文中有些图片没上传）