ExtJs:为包含多个字段的复杂表单选择哪种布局

Question

我需要在extjs中实现一个大型的复杂表单。此表单包含大约20行，每行有5-6个字段。在这些行中有文本字段、组合字段和仅显示字段。

我用父面板的'form‘布局实现了它。每一行都有“hbox”布局面板。为了显示字段标签，我必须再次将每个字段包装到一个具有表单布局的面板中。这甚至听起来很可怕，你能想象这样的混乱吗？我觉得我做错了。

需要一个关于如何以正确的方式做到这一点的建议！

更新:请查看我正在尝试获取的布局示例。

​

​

Answer 1

我经常使用layout: 'column'。然后，您可以告诉每个字段每个字段应该有多少个columnWidth。当宽度加起来超过1时，字段换行到下一行。

对于您的屏幕截图，它们的列宽都是三分之一，所以您可以这样做：

  Ext.create('Ext.panel.Panel', {
    layout: 'column',
    defaults: {columnWidth: 0.3},
    items: [{
      xtype: 'textfield'
    },{
       ...
    }]
  });

Answer 2

您可以使用内置的FieldContainer小部件(extjs4)或Ext.form.CompositeField小部件(extjs3)，而不是在panel中包装每一行。