ext combobox tooltip

最新推荐文章于 2024-07-29 17:49:33 发布

原创最新推荐文章于 2024-07-29 17:49:33 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT

本文介绍如何在ExtJS中为ComboBox组件添加Tooltip功能，当ComboBox内的文本过长时，通过鼠标悬停显示完整文本。文章提供了具体的代码实现方法。

当有时候我们combobox框里面的值太长，定义一定的长度，不能完全看见，这是就需要加tooltip,当鼠标悬浮时，出现完整的字符。
具体代码实现：

一个combobox框
var operateEvent = new Ext.form.ComboBox({
fieldLabel:'操作事件',
width:150,
valueField:'value',
displayField:'name',
triggerAction: 'all',
selectOnFocus:true,
hiddenName:'operation',
tpl :tpl,
store:operationEventStore,
editable:false
});
var tpl = '<tpl for="."><div class="x-combo-list-item" ext:qtitle="值" ext:qtip="{name}">{name}</div></tpl>';
tpl是var tplO = new Ext.XTemplate()里面的字符串，在combox里面定义配置项tpl：相当于创建一个模板对象。
然后在<div>中加ext:qtip;
必须加上 Ext.QuickTips.init(); 上面功能才能实现。
效果如下：