ComboBox 固定大小与内容列表的 growToLongestValue答案

【问题标题】：ComboBox fixed size with growToLongestValue for content listComboBox 固定大小与内容列表的 growToLongestValue
【发布时间】：2014-03-11 21:54:31
【问题描述】：

我想保持字段较小（固定最大宽度），但在下拉显示时让列表的内容增长到最长的值。有什么方法可以实现吗？

在这个例子中，滚动隐藏了最长值的最后部分。

http://jsfiddle.net/2P4x4/

Ext.create('Ext.form.field.ComboBox', {
    renderTo: Ext.getBody(),
    style: 'margin-left:5px',
    fieldLabel: 'MyLabel',
    labelSeparator: ' ',
    growToLongestValue: true,
    matchFieldWidth: false,
    //grow: true,
    store: [
        'longest_valueeeeeeeeeeeeeeeeeeeeeeeabcdeX',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'auto_scroll_to_this_selected_element',
        'l_value_2'
    ]
});

谢谢

【问题讨论】：

标签： extjs extjs4.2

【解决方案1】：

更改属性值如下：

    Ext.create('Ext.form.field.ComboBox', {
    renderTo: Ext.getBody(),
    style: 'margin-left:5px',
    fieldLabel: 'MyLabel',
    labelSeparator: ' ',
    growToLongestValue: false,
    //matchFieldWidth: false,
    //grow: true,
    store: [
        'longest_valueeeeeeeeeeeeeeeeeeeeeeeabcdeX',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'l_value_2',
        'auto_scroll_to_this_selected_element',
        'l_value_2'
    ]
});

【讨论】：

就像我说的那样，在我的情况下，我需要将字段的宽度保持为最大宽度，并将下拉列表扩展为其中的最大值。

【解决方案2】：

这是我最终找到解决此问题的方法。我覆盖了 exjs 的 css 以在每个

的左侧添加填充

元素：

http://jsfiddle.net/2P4x4/2/

.x-boundlist-item {
    padding: 0 20px 0 6px;
}

即使没有滚动，右侧也总是多出 20px，但至少内容不会被滚动条隐藏。

【讨论】：