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設定（ドキュメント）のみがあります。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 に答える