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个解决方案：

原生外部解决方案

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

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

这与宽度有关，所以它可能正是你要找的东西。但是，您可能没有按照自己的方式剪切文字。

JS / ExtJS 3比较文本的宽度和元素的宽度

1 个答案: