Ext.js5表单—（在mousedown的时候就进行验证）（并且显示错误信息的时候样式会自动变化）hbox的布局(47)

/**
 * In the following example, the space needed for the email validation error message is
 * taken automatically from the field size when needed. The mousedown event is being used
 * for validation for more immediate feedback. Also note that the FormPanel itself is
 * using an HBox layout.
 * 在下面的例子中，email进行验证的错误星系需要让文本域自动更改大小样式（虽然我觉得不好看）。mousedown事件被
 * 被用做验证及时反馈。我们用了hbox布局。
 */
Ext.define('KitchenSink.view.form.HBoxLayoutForm', {
    extend: 'Ext.form.Panel',
    xtype: 'form-hboxlayout',


    title: 'HBox Form Panel',
    bodyPadding: '5 5 0',
    width: 600,

    fieldDefaults: {
        labelAlign: 'top',
        msgTarget: 'side'
    },

    defaults: {
        border: false,
        xtype: 'panel',
        flex: 1,
        layout: 'anchor'
    },

    layout: 'hbox',

    items: [{
        items: [{
            xtype: 'textfield',
            fieldLabel: 'First Name',
            anchor: '-5',
            name: 'first'
        }, {
            xtype:'textfield',
            fieldLabel: 'Company',
            anchor: '-5',
            name: 'company'
        }]
    }, {
        items: [{
            xtype: 'textfield',
            fieldLabel: 'Last Name',
            anchor: '100%',
            name: 'last'
        },{
            xtype: 'textfield',
            fieldLabel: 'Email',
            anchor: '100%',
            name: 'email',
            vtype: 'email'
        }]
    }],

    buttons: ['->', {
        text: 'Save'
    }, {
        text: 'Cancel'
    }]
});