ext4js - 在复选框字段旁边放置文本字段

Question

我是一般使用ext4js和web应用程序开发的新手。

我有一个表单，在这种形式下，我想要一个复选框，它旁边是一个文本框。我将表单的布局类型从vbox更改为列，并设置复选框和文本字段的宽度，以使它们都在一行中。到目前为止，这对我非常有用。

但是，当我复制复选框和文本框时，结果改变了。复制的复选框和文本框位于不同的行上，并且它们居中。

这里是我的代码：

{ 
       xtype: 'form', 
       itemId: 'spousework', 
       maxWidth: 500, 
       width: 75, 
       layout: 'column', 
       bodyBorder: true, 
       bodyPadding: 10, 
       bodyStyle: 'border-right-style: solid;', 
       frameHeader: false, 
       header: false, 
       title: 'My Form', 
       items: [ 
        { 
         xtype: 'displayfield', 
         itemId: 'userNameField2', 
         margin: '10 0 10 0', 
         maxWidth: 700, 
         minWidth: 700, 
         width: 700, 
         defaultAlign: 'center', 
         fieldLabel: 'Spouse\'s Work', 
         hideLabel: true, 
         labelWidth: 0, 
         value: 'SPOUSE\'S WORK', 
         fieldStyle: 'color: #007AA3; text-align: left; font-weight: bold;' 
        }, 
        { 
         xtype: 'checkboxfield', 
         maxHeight: 20, 
         fieldLabel: 'Spouse\'s Employer', 
         labelWidth: 120, 
         boxLabel: '' 
        }, 
        { 
         xtype: 'textfield', 
         margin: '0 0 0 10', 
         maxHeight: 20, 
         width: 300, 
         fieldLabel: '', 
         labelWidth: 120 
        }, 
        { 
         xtype: 'checkboxfield', 
         maxHeight: 20, 
         fieldLabel: 'Spouse\'s Employer', 
         labelWidth: 120, 
         boxLabel: '' 
        }, 
        { 
         xtype: 'textfield', 
         margin: '0 0 0 10', 
         maxHeight: 20, 
         width: 300, 
         fieldLabel: '', 
         labelWidth: 120 
        } 
       ] 
      } 

谁能帮助？如何使用表单的列布局正确排列后续行中的项目？

Answer 1

您可以使用filedcontainer在你的形式像下面列布局

{ 
    xtype: 'fieldcontainer', 
    layout: 'column', 
     fieldLabel: 'Spouse\'s Employer', 
    items: [ 
     { 
       xtype: 'checkboxfield', 
       maxHeight: 20, 
       boxLabel: '', 
       margin: '0 5 0 0' 
     }, 
     { 
       xtype: 'textfield', 
     } 
    ]}