Question

我是初次使用ext4js和web app dev的新手。

我有一个表单，在那个表单中，我想要一个复选框，它旁边是一个文本字段。我将表单的布局类型从vbox更改为column，然后设置复选框和textfield的宽度，以便它们都在一行中。到目前为止，这对我来说很有用。

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

这是我的代码：

{
                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

您可以在表单中使用filedcoltainer，如下面的列布局

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

ext4js - 在checkboxfield旁边放置一个文本字段

1 个答案: