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

Question

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

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

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

Answer 1

我也有同样的问题，我找到了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
        }]
    }]
});

编辑

_{by rockinthesixstring}

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

CSSJS

.x-checkbox{ background:white;}

​

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

Answer 2

设置背景的问题在于您只是在显示级别上修复它。从功能上来说，输入元素仍然具有较小的高度。所以我们实际上需要拉伸输入元素的高度。

这是在我的案例中有效的修复方法。
添加 css 样式：

.x-form-label span {
    word-wrap: break-word; /*to avoid words that exceed length of the label*/
}

.x-input {
    /*
      the fix was working even without this, 
      but I'm leaving it here for more stability
    */
    position: relative;
}
.x-input input {
    /*basically, the main 4 magic lines of the fix*/
    position: absolute;
    height:100%;
    width: 70%;    
    right: 0;

    /*for more reliability*/
    top: 0;
    bottom: 0;
}

将 'x-input' 类分配给 Sencha 应用程序中的元素，如下所示：

new Ext.form.Radio({
    name: 'yourname',
    value: 'yourvalue',
    label: 'yourlabel',
    cls: 'x-input'
});

Answer 3

这些答案实际上都没有使复选框区域的整个垂直空间可单击。您需要的是为包含的 div 指定固定高度，并为其所有子级指定 100% 高度（哦，好吧，如果您想深入研究并仅将其应用于您需要的 div，您可以这样做也是如此，但懒惰的方式效果很好）。这就是我的意思：

JS

{
    xtype: 'checkboxfield',
    id: 'YourIdHere',
    name : 'YourNameHere',
    label: 'Your Checkbox Label Here'
}

CSS

#YourIdHere {
    max-height: 50px !important;
    height: 50px !important;
}
#YourIdHere div {
    height:100% !important;
}

当然，如果您想要的话，这不会动态改变标签+复选框的高度。所以这不是一个完整的解决方案，但我敢打赌它在大多数情况下都能满足您的需求。这样做的原因是，当任何父 DIV 的高度未指定时，子 DIV 无法假定其父 DIV 的 100% 高度。您必须确保所有 DIV 都具有从 BODY 向下的高度，或者从具有固定高度的 DIV 向下的高度。

Answer 4

当我遇到这个问题时，我设置了固定宽度（像素）和固定标签宽度（像素）。通常，调整标签宽度对我来说很有效。尝试使用固定宽度而不是百分比。

Answer 5

您还可以在元素本身中添加样式

defaults: {
                    xtype: 'textfield',
                    required: true,
                    useClearIcon: true,
                    autoCapitalize: false,
                    style: 'font-size: 0.8em; background: white;',
                },