Question

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

一个：______ 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'
                    }
                ]
            }
        ]
    });
});

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

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个文本字段。列布局不需要设置高度。

ExtJs布局：如何安排每行中的项目？

1 个答案: