Question

我在extjs中设置了组合框，并设置了minWidth。当我从选择列表中选择最长的字符串时。字符串在组合框的文本字段中被截断。如何避免截断字符串以查看我们从列表中选择的完整字符串。

Answer 1

使盒子更宽。 Ext不会自动执行此操作。表单字段的minWidth适用于可以调整其周围的面板/容器并且表单字段设置为flex的情况，但是开箱即用，表单字段将永远不会根据字段的内容调整大小。

如果您仍希望使用内容调整字段大小，可以查看here以了解如何手动实现该字段的方法。

Answer 2

在组合中使用listConfig configuartion并应用必需的css来删除truncate。请仔细阅读我的例子。

.withOutTruncate{
    word-wrap: break-word; 
}

`var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data: [{
        "abbr": 'largeText',
        "name": 'testtesttesttesttestetsetetetetetetetetehjghh'
    }, {
        "abbr": "AL",
        "name": "Alabama"
    }, {
        "abbr": "AK",
        "name": "Alaska"
    }, {
        "abbr": "AZ",
        "name": "Arizona"
    }]
});

Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State',
    store: states,
    listConfig: {
        cls: 'withOutTruncate'
    },
    queryMode: 'local',
    valueField: 'abbr',
    renderTo: Ext.getBody(),
    displayField: 'name'
});

注意：我不擅长CSS。我尝试使用word-break它在我的结尾工作正常，但你应用文本属性css使它更好地工作。

如何避免在extjs的选择框中截断文本

2 个答案: