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'
    }]
});