Ext3.2 布局——form layout

formlayout是为表单而制定的布局。但是并不建议使用panel，然后设置layout:'form'，实际开发中，通常首选使用
FormPanel (默认情况下配置成FormLayout作为它的布局类) 因为它同时为表单的loading(加载)，validating(校验)和submitting(提交)提供了内建的功能。如以下示例：

Ext.onReady(function() {
Ext.QuickTips.init();
// While you can create a basic Panel with layout:'form',
// practically
// you should usually use a FormPanel to also get its form
// functionality
// since it already creates a FormLayout internally.
var form = new Ext.form.FormPanel({
renderTo : 'da',
title : 'Form Layout',
bodyStyle : 'padding:15px',
width : 350,
defaultType : 'textfield',
defaults : {
// applied to each contained item
width : 230,
msgTarget : 'side'
},
items : [{
fieldLabel : 'First Name',
name : 'first',
allowBlank : false,
labelStyle : 'font-weight:bold;',
labelSeparator : ':' // override
// labelSeparator
}, {
fieldLabel : 'Last Name',
name : 'last'
}, {
fieldLabel : 'Email',
name : 'email',
vtype : 'email'
}, {
xtype : 'textarea',
hideLabel : true, // override hideLabels
name : 'msg',
anchor : '100% -53'
}],
buttons : [{
text : 'Save'
}, {
text : 'Cancel'
}],
layoutConfig : {
labelSeparator : '~~' // superseded by assignment
// below
},
// config options applicable to container when
// layout='form':
hideLabels : false,
labelAlign : 'right', // or 'right' or 'top'

// labelSeparator : '>>', // takes precedence over
// layoutConfig value
labelWidth : 80, // defaults to 100
labelPad : 10
// defaults to 5, must specify
// labelWidth to be
// honored

});
});

上述例子中，defaultType指的是组件的默认类型。而需要特殊组件的时候，则可以设置xtype。同时，我们可以看到一个规律，items中的元素的设置项会优先考虑。如first name中的labelSeparator被执行，msg的hideLabel被执行（全局的是hideLables）。另外，Ext的配置项存在一定的依赖性。如：如果lablewidth没有设置的话，labelPad是无效的。这些需要查看详细的API并且多记。否则，半天都不会想到原来是这个问题。又比如，fieldLabel只有在form或者formpanel下才有效，其他布局是无效的。总之，Ext需要极其的仔细认真。