Extjs中Combo组件添加tooltip

最新推荐文章于 2018-07-04 14:14:55 发布

davidxj

最新推荐文章于 2018-07-04 14:14:55 发布

阅读量5.4k

点赞数 1

分类专栏： Ext Script 文章标签： extjs ext div class

本文链接：https://blog.csdn.net/davidxj/article/details/5419461

版权

Script 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

Ext

26 篇文章 0 订阅

订阅专栏

当有时候我们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(); 上面功能才能实现。

如果下拉框选项过长，需要加省略号，可以设置tpl为

'<tpl for="."><div class="x-combo-list-item" ext:qtitle="值" ext:qtip="{name}">{name:ellipsis(15)}</div></tpl>';

-----------------------------------------

记得Ext.QuickTips.init();！！！