试图让两个 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

您的 form 中有两个 items 定义，所以第二个只是先覆盖，而不是添加新定义。您还必须对父组件使用 hbox 布局。

我更新了你的代码，检查this fiddle。

试图让两个 vbox 彼此相邻

Trying to get two vbox next to each other

extjs

vbox