javascript - JS/ExtJS 3 比较文本的宽度和文本所在元素的宽度

Question

我有一个组合框:

var myCombo = new Ext.form.ComboBox({
    id: 'myCombo',
    fieldLabel: 'My Combo',
    forceSelection: true,
    valueField: 'id',
    displayField: 'name',
    triggerAction: 'all',
    width: 300,
    mode: 'local',
    store: myStore,
    tpl: '<tpl for="."><tpl if="values.tplRequired != false"><tpl if="this.optGroup != values.optGroup"><tpl exec="this.optGroup = values.optGroup"></tpl><div class="x-combo-list-hd">{optGroup}</div></tpl></tpl><div ext:qtip="{name}<tpl if="values.description != \'\'"> - {description}</tpl>" style="padding-left: 15px;" class="x-combo-list-item">{name}<tpl if="values.description != \'\'"> - {description}</tpl></div></tpl>'
});

有些选项的文本太长({name} - {description})，因此我想向此类选项添加带有全文的工具提示。

有没有办法通过 ExtJS 3 方法或 JS 比较文本宽度和组合框宽度？

如果我不能通过 tpl 做到这一点，我如何循环遍历组合框的所有项目并通过 ExtJS/JS 方法比较宽度？

Answer 1

我可以看到 2 个解决方案:

原生 ext 解决方案

使用http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.util.Format-method-ellipsis限制结果中使用的字符数。仅当需要时，这才会很好地 chop 您的文本:

Ext.util.Format.ellipsis("This is the longest entry I have ever seen in my combo", 20);
=> "This is the longe..."

Ext.util.Format.ellipsis("This is the longest entry I have ever seen in my combo", 20, true);
=> "This is the..."

这样做的好处是可以很好地剪切而不需要咀嚼任何半个单词。然而它不依赖于宽度

纯 CSS 解决方案

查看https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

这取决于宽度，所以它可能就是您正在寻找的。但是，您可能无法按照您想要的方式剪切文本。