设置组合框宽度以自动调整它在ExtJS

时间:2015-12-14 10:49:51

标签: javascript html css extjs combobox

如何设置组合框宽度以自动适合它最长的字段选项文本?

说,我有宽度为300的组合框字段。但是如果从该组合中有一个字段选项有一些长文本 - 大于300px。

  

我想让我的组合框宽度自动适合那个长字段选项   在没有任何切割的情况下在Combo中查看整个选定的字段选项。

实际上,我忘记了配置在extjs中为组合做同样的事情。

我认为在ExtJS 4中,组合宽度被设置为自动适合最长字段选项。

我不想通过动态添加代码来自动调整它来实现它。

2 个答案:

答案 0 :(得分:4)

无需添加任何手动代码。不要给宽度..

  

成长:真实,
  growToLongestValue:true

在ExtJS 6中为我工作..

Ext.create('Ext.form.ComboBox', {
       fieldLabel : 'Field',
       store : ['a', 'b', 'c', 'Long long long long long long long long'],
       grow : true,
       growToLongestValue : true,
       renderTo : Ext.getBody()
});

检查Sencha Fiddle https://fiddle.sencha.com/#fiddle/12jc

答案 1 :(得分:0)

你必须手动完成;它在Ext代码中不可用。像这样:

listeners: {
    afterrender: function(box) {
        var width = 0,
           metrics = new Ext.util.TextMetrics();
        box.getStore().each(function(rec) {
            var recWidth = textMetrics.getWidth(rec.get(box.displayField));
            width = Math.max(width,recWidth);
        });
        box.setWidth(width);
    }
}

没有任何测试或保修,但您应该知道如何解决它。

可以找到如何使用TextMetrics的详细示例in the docs