Ext form表单两列及多列布局

Ext.onReady(function(){
Ext.create('Ext.form.Panel', {
   renderTo: Ext.getBody(),
   title: 'User Form',
   xtype: 'form',
    layout: 'anchor',
   height: 300,
   width: 800,
   items: [{
xtype: 'fieldcontainer',
layout: 'hbox',
defaults: {
       labelAlign: 'left',
       padding: '10 0 0 0'
   },
   items: [
       {
            xtype: 'textfield',
           fieldLabel: 'First Name',
           name: 'firstName'
       },
       {
            xtype: 'textfield',
           fieldLabel: 'Last Name',
           name: 'lastName'
       },
       {
           xtype: 'datefield',
           fieldLabel: 'Date of Birth',
           name: 'birthDate'
       }
   ]
},
  {
    // 文本域容器 fieldcontainer
    xtype: 'fieldcontainer',
    // 在容器中水平排列 hbox 垂直排列 vbox
layout: 'vbox',
defaults: {
       xtype: 'textfield',
       // name在文本框的位置 top left right
       labelAlign: 'left',
       // 距离上一个fieldcontainer容器的距离，分别代表上、右、下、左
       padding: '5 0 0 0'
    },
    items: [
        {
            fieldLabel: 'First Name',
            name: 'firstName'
        },
        {
            fieldLabel: 'Last Name',
            name: 'lastName'
        },
        {
            xtype: 'datefield',
            fieldLabel: 'Date of Birth',
            name: 'birthDate'
        }
    ]
   }]    
});

});

上面的代码是横排3列和竖排3行的例子，fieldcontainer是文本域的容器，实现页面如下：

2列的话就在fieldcontainer写2个label。