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

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

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