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