Ext JS 表单布局：平行分列详解

"Ext JS表单布局相关教程，包含示例代码和效果展示，适用于学习和参考Ext JS中表单的布局设计。" 在Ext JS中，表单布局是构建用户界面的重要部分，它决定了表单元素如何在界面上排列和展示。本教程主要介绍了两种常见的表单布局方式：默认的平铺布局和平行分列布局。 1. 平铺布局（默认布局） 平铺布局是最基础的布局方式，表单元素会按照创建的顺序从左到右、从上到下依次排列。在没有指定特定布局的情况下，表单会自动采用这种布局。例如，创建一个包含多个文本字段的表单，它们将按照默认的平铺布局进行展示。 2. 平行分列布局 平行分列布局允许开发者将表单元素按照列的方式并排显示，提供更灵活的界面设计。通过设置`layout: 'column'`，可以声明表单使用列布局。然后，通过`columnWidth`属性来定义每一列的宽度，通常以百分比表示。在下面的示例中，我们创建了一个三列的布局，每列的宽度均为33%： ```javascript var form = new Ext.form.FormPanel({ renderTo: 'div', labelAlign: 'right', buttonAlign: 'right', labelWidth: 60, title: '表单', frame: true, width: 400, items: [{ layout: 'column', items: [ { columnWidth: .33, layout: 'form', items: [{ xtype: 'textfield', fieldLabel: '姓名' }] }, { columnWidth: .33, layout: 'form', items: [{ xtype: 'textfield', fieldLabel: '年龄' }] }, { columnWidth: .33, layout: 'form', items: [{ xtype: 'textfield', fieldLabel: '性别' }] } ] }], buttons: [{ text: '按钮', handler: function() { form.getForm().submit(); } }] }); ``` 在这个例子中，每个包含输入框的子容器都指定了`layout: 'form'`，这是因为`FormPanel`默认的布局是自上而下的排列，也就是`'form'`布局。如果不这样设置，表单元素可能会无法正确显示。 3. 分列布局中每列放置多个输入框 在平行分列布局中，每一列不仅可以放置一个输入框，还可以根据需求添加多个。例如，如果你想在一个列里放置两个输入框，只需要在该列的`items`数组中添加更多的表单组件即可： ```javascript items: [{ layout: 'column', items: [ { columnWidth: .5, layout: 'form', items: [ { xtype: 'textfield', fieldLabel: '姓名' }, { xtype: 'textfield', fieldLabel: '城市' } ] }, { columnWidth: .5, layout: 'form', items: [ { xtype: 'textfield', fieldLabel: '年龄' }, { xtype: 'textfield', fieldLabel: '性别' } ] } ] }] ``` 通过这种方式，你可以自由地调整表单的结构，使得信息的录入更加清晰和高效。 总结： Ext JS的表单布局提供了丰富的选项来适应各种复杂的界面设计需求。无论是简单的平铺布局还是灵活的平行分列布局，开发者都能轻松创建出美观且功能强大的表单。通过理解并熟练运用这些布局方式，可以极大地提升用户体验，使得应用程序的界面更加友好。