Layout ExtJs布局：如何在每行中排列项目？

我是extjs的初学者。
我想按如下方式排列一些文本字段：

a:_______;b:____;c:______
d:_________;e:____;f:______

以下是我的测试代码：

Ext.onReady(function()
{
    new Ext.panel.Panel(
    {
        renderTo: Ext.getBody(),
        layout:'vbox',
        width: 670,
        tbar: [{text:"Add"}],
        defaults:
        {
            layout:"column",
            height:50
        },
        items:
        [
            {
                defaults:
                {
                    labelAlign:"right",
                    labelWidth:50
                },
                items:
                [
                    {
                        xtype: 'textfield',
                        fieldLabel: 'a'
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'b'
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'c'
                    }
                ]
            },
            {
                defaults:
                {
                    labelAlign:"right",
                    labelWidth:50
                },
                items:
                [
                    {
                        xtype: 'textfield',
                        fieldLabel: 'd'
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'e'
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'f'
                    }
                ]
            }
        ]
    });
});

因此，页面无法显示任何文本字段。

---

提前感谢您的帮助

您可以执行以下操作：

new Ext.panel.Panel({
  renderTo: Ext.getBody(),
  width: 670,
  tbar: [{
    text: "Add"
  }],
  defaults: {
    layout: ,
    height: 50
  },
  items: [{
    defaults: {
      labelAlign: "right",
      labelWidth: 50
    },
    items: [{
      xtype: 'textfield',
      fieldLabel: 'a'
    }, {
      xtype: 'textfield',
      fieldLabel: 'b'
    }, {
      xtype: 'textfield',
      fieldLabel: 'c'
    }]
  }, {
    defaults: {
      labelAlign: "right",
      labelWidth: 50
    },
    items: [{
      xtype: 'textfield',
      fieldLabel: 'd'
    }, {
      xtype: 'textfield',
      fieldLabel: 'e'
    }, {
      xtype: 'textfield',
      fieldLabel: 'f'
    }]
  }]
});

new Ext.panel.Panel({
  renderTo: Ext.getBody(),
  layout: 'column',
  width: 670,
  tbar: [{
    text: "Add"
  }],
  defaults: {
    labelAlign: "right",
    labelWidth: 50
  },
  items: [{
    xtype: 'textfield',
    fieldLabel: 'a'
  }, {
    xtype: 'textfield',
    fieldLabel: 'b'
  }, {
    xtype: 'textfield',
    fieldLabel: 'c'
  }, {
    xtype: 'textfield',
    fieldLabel: 'd'
  }, {
    xtype: 'textfield',
    fieldLabel: 'e'
  }, {
    xtype: 'textfield',
    fieldLabel: 'f'
  }]
});

这与您的示例基本相同，只是将

vbox

布局替换为默认的

auto

布局。您的示例不起作用的原因是

vbox

布局需要在其上设置高度和宽度

您还可以执行以下操作：

new Ext.panel.Panel({
  renderTo: Ext.getBody(),
  width: 670,
  tbar: [{
    text: "Add"
  }],
  defaults: {
    layout: ,
    height: 50
  },
  items: [{
    defaults: {
      labelAlign: "right",
      labelWidth: 50
    },
    items: [{
      xtype: 'textfield',
      fieldLabel: 'a'
    }, {
      xtype: 'textfield',
      fieldLabel: 'b'
    }, {
      xtype: 'textfield',
      fieldLabel: 'c'
    }]
  }, {
    defaults: {
      labelAlign: "right",
      labelWidth: 50
    },
    items: [{
      xtype: 'textfield',
      fieldLabel: 'd'
    }, {
      xtype: 'textfield',
      fieldLabel: 'e'
    }, {
      xtype: 'textfield',
      fieldLabel: 'f'
    }]
  }]
});

new Ext.panel.Panel({
  renderTo: Ext.getBody(),
  layout: 'column',
  width: 670,
  tbar: [{
    text: "Add"
  }],
  defaults: {
    labelAlign: "right",
    labelWidth: 50
  },
  items: [{
    xtype: 'textfield',
    fieldLabel: 'a'
  }, {
    xtype: 'textfield',
    fieldLabel: 'b'
  }, {
    xtype: 'textfield',
    fieldLabel: 'c'
  }, {
    xtype: 'textfield',
    fieldLabel: 'd'
  }, {
    xtype: 'textfield',
    fieldLabel: 'e'
  }, {
    xtype: 'textfield',
    fieldLabel: 'f'
  }]
});

它是一个

列

布局，没有以前的嵌套项。

列

布局的一个优点是，它会将尽可能多的项目向左移动，如果某个项目不适合，它会移到下一行。

---

由于宽度为静态670，因此每行只能容纳3个文本字段。列布局不需要设置高度。

请参见示例代码

vbox布局需要高度和宽度

+1不知道这一点。谢谢，我误解了“vbox”的用法。