Ext.js表单—Vbox布局（46）

/**
* This example shows how to use vbox layout with Ext JS Forms.
* 怎么用vbox布局表单
*/
Ext.define('KitchenSink.view.form.VBoxLayoutForm', {
extend: 'Ext.window.Window',
xtype: 'form-vboxlayout',

title: 'Resize Me',
width: 500,
height: 300,
minWidth: 300,
minHeight: 220,
layout: 'fit',
//plain 为真时，用一个透明的背景渲染窗体主体以便于它将融入框架元素， 为假时添加一个相对轻的背景颜色以便视觉上突出身体（body）元素并且 相对于周围的框架将它显示的更清晰。
plain: true,

items: [{
xtype: 'form',

defaultType: 'textfield',
fieldDefaults: {
labelWidth: 60
},

layout: {
//竖直的布局
type: 'vbox',
align: 'stretch'
},

bodyPadding: 5,
border: false,

items: [{
fieldLabel: 'Send To',
name: 'to'
}, {
fieldLabel: 'Subject',
name: 'subject'
}, {
xtype: 'textarea',
hideLabel: true,
name: 'msg',

// Setting flex to 1 for textarea when no other component has flex
// is effectively tells the layout to strech the textarea vertically,
// taking all the space left after the fields above have been laid out.
//给textarea设置flex为1是非常有效率的，当其他组件没有设置flex属性的时候，这样的设置
//可以将textarea数值拉伸，占满空间
flex: 1
}]
}],

buttons: [{
text: 'Send'
},{
text: 'Cancel'
}]
});