extjs - 试图让两个 vbox 彼此相邻

Question

我有两个vbox我想要的紧挨着。但是，只有第一个出现。为什么会这样，我该如何改变它？这是我的代码

  layout: 'fit',
  title: 'Avail Requests Details',
  minWidth: 1000,
  minHeight: 600,
  width: 1174,
  height: 600,
  autoShow: true,
  //listeners: {
  //    beforedestroy: 'onBeforeDestroy'
  //},

  items: [{
    xtype: 'form',
    reference: 'viewForm',
    bodyPadding: 10,
    defaults: {
      xtype: 'container',
      height: 25,
      layout: {
        type: 'column'
      },
      defaults: {
        columnWidth: 0.3,
        labelWidth: 140
      }
    },
    layout: {
      type: 'vbox',
    },
    items: [{
      xtype: 'displayfield',
      fieldLabel: 'CHANNEL',
      name: 'Channel'
    },
    {
      xtype: 'displayfield',
      fieldLabel: 'ADVERTISER',
      name: 'AdvertiserName'
    },
    {
      xtype: 'displayfield',
      fieldLabel: 'DEMO',
      name: 'Demo'
    },
    {
      xtype: 'displayfield',
      fieldLabel: 'COMMENTS',
      name: 'comments'
    }],
    layout: {
      type: 'vbox',
    },
    items: [{
      xtype: 'displayfield',
      fieldLabel: 'CHANNEL',
      name: 'Channel'
    },
    {
      xtype: 'displayfield',
      fieldLabel: 'ADVERTISER',
      name: 'AdvertiserName'
    },
    {
      xtype: 'displayfield',
      fieldLabel: 'DEMO',
      name: 'Demo'
    },
    {
      xtype: 'displayfield',
      fieldLabel: 'COMMENTS',
      name: 'comments'
    }]
  }]
});

Answer 1

你的 中有两个items定义form，所以第二个只是先覆盖，而不是添加新的。此外，您还必须使用hboxlayout 作为父组件。

我更新了你的代码，检查这个小提琴。