Ext.js5表格—多列的表格（比fieldcontainer布局效率很多）(48)

/**
 * Demonstrates a simple contact form.
 * 示例一个简单的联系表格
 */
Ext.define('KitchenSink.view.form.MultiColumn', {
    extend: 'Ext.form.Panel',
    xtype: 'form-multicolumn',


    title: 'Multi Column Form',
    frame: true,
    resizable: true,
    minHeight: 200,
  //这个布局比fieldcontainer简单太多
    layout: 'column',

    defaults: {
        layout: 'form',
        xtype: 'container',
        defaultType: 'textfield',
        style: 'width: 50%'
    },

    items: [{
        items: [
            { fieldLabel: 'First Name' },
            { fieldLabel: 'Last Name' },
            { fieldLabel: 'Phone Number' },
            { fieldLabel: 'Email Address' }
        ]
    }, {
        items: [
            { fieldLabel: 'Street Address 1' },
            { fieldLabel: 'Street Address 2' },
            { fieldLabel: 'City, State' },
            { fieldLabel: 'ZIP code' }
        ]
    }],

    buttons: [
        { text: 'OK' },
        { text: 'Cancel' }
    ],

    initComponent: function() {
        this.width = 590;
        this.minWidth = 590;
        this.callParent();
    }
});