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

Question

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

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

即使我为每个 checkboxfield 设置了 labelWidth: '80%'，文字仍然会换行并显示那个小灰色区域。我宁愿那个区域全是白色的，而且所有区域都是“可触摸的”以激活复选框。

Answer 1

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

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

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

第二种解决方案:您可以使用 overflow hidden，但在这种情况下，末尾的文本将被剪切。

.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
        }]
    }]
});

编辑

_{rockinthesixstring}

这是我为获得相同结果所做的修改。

CSS

.x-checkbox{ background:white;}

JS

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