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

Question

我是 extjs 的初学者。
我想安排一些TextFields如下：

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'
                    }
                ]
            }
        ]
    });
});

因此，页面无法显示任何文本字段。
提前感谢您的帮助！

Answer 1

你可以这样做：

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'
    }]
  }]
});

除了将vbox 布局替换为默认的auto 布局之外，这基本上与您的示例相同。您的示例不起作用的原因是 vbox 布局需要以某种方式设置高度和宽度。

你也可以这样做：

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'
  }]
});

这是一个column 布局，没有之前的嵌套项。 column 布局的一个好处是它会将尽可能多的项目向左移动，如果一个项目不适合，它将进入下一行。 由于宽度是静态的 670，因此每行只能容纳 3 个文本字段。列布局不需要设置高度。