ExtJs：为具有许多字段的复杂表单选择哪种布局答案

【问题标题】：ExtJs: which layout to choose for complex form with many fieldsExtJs：为具有许多字段的复杂表单选择哪种布局
【发布时间】：2011-08-25 07:09:38
【问题描述】：

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

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

需要有关如何以正确方式进行操作的建议！

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

【问题讨论】：

标签： layout extjs extjs3

【解决方案1】：

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

对于您的屏幕截图，它们都是三分之一的列宽，因此您可以执行以下操作：

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

【讨论】：

【解决方案2】：

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

【讨论】：

好主意，但我正在使用 ExtJs3。有没有类似的东西？
@innerJL，是的，当然有。查看Ext.form.CompositeField 小部件。
恐怕不适合。例如典型的行看起来像：复选框它是标签文本字段（标签在文本字段正上方）一个文本字段用复合字段创建它是不可能的，最大的问题是根据需要放置字段标签。
@innerJL，您能否发布当前布局的屏幕截图，以便我了解它的外观？
请看下面，我添加了快照。