4

我设计了一个如图所示的输入表格，

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

我的代码如下，

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
},
....
....
]

如何在文本框和中间名列之间留出/增加空格？在此处输入图像描述

4

2 回答 2

1

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

defaults: {
    labelStyle: 'padding-left:10px;'
},
items: [...]
于 2012-04-27T10:04:56.960 回答
0

将defaults配置添加到列的容器中。defaults它的所有子项都将具有您在( docs )中定义的设置。在此示例中，只有margin设置 ( docs )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()
});

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

PS：列布局文档在这里。

于 2014-09-01T11:55:54.197 回答