Sencha Touch 复选框字段具有带有长标签的时髦布局

我的应用程序中的几个复选框字段有很长的标签，不幸的是它会导致一些奇怪的行为。

有什么办法可以让这个看起来好一点吗？我的意思是，如果我“触摸”灰色区域，复选框不会激活（即使复选框位于灰色区域内）......但我必须单击白色区域。这有点令人困惑。

即使我设定labelWidth: '80%'每一个checkboxfield，文字仍然环绕并显示出那个小灰色区域。我希望该区域全部是白色的，并且所有区域都是“可触摸的”以激活复选框。

我也有同样的问题，我找到了3种方法来解决它，选择最适合你的方法，我使用第三个版本。抱歉，我的英语不是最好的，我希望它能被理解:(

第一个解决方案： 您可以添加自定义 css 条目。它可以解决问题，但如果您更改主题，则可能会出错。

.x-form-field-container {
    background: white;
}

第二个解决方案： 您可以使用溢出隐藏，但在这种情况下，末尾的文本将被剪切。

.x-form-label {
    overflow: hidden;
}

.x-form-label span
{
    white-space: nowrap;
}

第三个解决方案：

您可以在字段前使用 100% 宽度的标签。在这种情况下，输入字段的宽度也将是 100%。

new Ext.form.FormPanel({
    title: 'Form name',
    scroll: 'vertical',
    items: [{
        xtype: 'fieldset',
        title: 'Fieldset title',
        items: [{
            xtype: 'field',
            html: '<div class="x-form-label" style="width:100%"><span>This is the label of the field in below</span></div>'
        },{
            xtype: 'selectfield',
            name: 'nameOfTheField'
            //without label attribute
        }]
    }]
});

EDIT

这是我为了达到相同结果而进行的修改。

CSS

.x-checkbox{ background:white;}

JS

{
    xtype: 'checkboxfield',
    name: 'updateinfo',
    label: 'Update my info',
    labelWidth: '80%',
    cls: "x-checkbox"
}