如何增加EXtJS列布局中的列空间

Question

我设计了一个如图所示的参赛表格，

我需要在测试框和中间名标签之间保留相同的空格。

我的代码如下，

var patientForm = new Ext.FormPanel({
layout: 'column',
columnWidth:1.5,
renderTo: "patientCreation",
frame: true,
autoScroll:true,
title: 'Create Patient',
bodyStyle: 'padding:9px',           
width: 900,
items: [
{   xtype: 'textfield',
    fieldLabel: 'FirstName',
    name: 'firstName',
    vtype : 'alpha',
    allowBlank:false
},{
    xtype: 'textfield',
    fieldLabel: 'MiddleName',
    name: 'middleName',
    vtype : 'alpha'             
},{
    xtype: 'textfield',
    fieldLabel: 'LastName',
    name: 'lastName',
    vtype : 'alpha',
    allowBlank:false
},{
    xtype: 'textfield',
    fieldLabel: 'Email',
    name: 'email',
    vtype: 'email',
    allowBlank:false
},
....
....
]

如何在文本框和中间名列之间留出/增加空间？

Answer 1

如果您知道列数，请使用列布局。否则这样做：

defaults: {
    labelStyle: 'padding-left:10px;'
},
items: [...]

Answer 2

将defaults配置添加到列的容器中。它的所有孩子都将拥有您在defaults（docs）中定义的设置。在此示例中，margin中defaults设置Ext.create('Ext.panel.Panel', { title: 'Column Layout - with default margins', width: 350, height: 250, layout:'column', defaults: { margin: '0 15 0 0' //top right bottom left (clockwise) margins of each item/column }, items: [{ title: 'Column 1', columnWidth: 0.25 },{ title: 'Column 2', columnWidth: 0.55 },{ title: 'Column 3', columnWidth: 0.20 }], renderTo: Ext.getBody() }); 设置{{1}}将应用于每个项目/列。

{{1}}

接受的解决方案仅适用于字段作为列。我的解决方案适用于任何类型的列。

PS：列布局文档为docs。