Sencha Touch checkboxfield具有带有长标签的时髦布局

Question

我在我的应用程序中为一些复选框提供了很长的标签,不幸的是它会导致一些奇怪的行为.

有没有办法让这个看起来好一点？我的意思是,如果我'触摸'灰色区域,复选框不会激活(即使复选框位于灰色区域内)...但我必须单击白色区域.这有点令人困惑.

即使我设置labelWidth: '80%'为每个checkboxfield,单词仍然包裹并显示小灰色区域.我宁愿那个区域都是白色的,所有这些都可以"触摸"来激活复选框.

Answer 1

我有同样的问题,我找到了3种方法来解决它,为你选择最好的方法,我使用的是第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
        }]
    }]
});

编辑

_{通过rockinthesixstring}

这是我为了达到相同结果所做的修改.

CSS

.x-checkbox{ background:white;}

JS

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