工作中可能遇到这样的问题:使用extjs显示web界面需要显示某些内容时,可能由于内容太多,导致显示内容不全。这时,可能需要增加提示,鼠标悬停在某处时,显示其全部内容,鼠标移走则隐藏,这里介绍两种组件的qtip实现。
首先说明我用的extjs版本是3.X的,对于4.X的可能某些参数有些区别,根据查的资料,文中有说明。
1、grid panel表中某一列增加提示。
实现方法:增加渲染属性。
效果图如下:
代码如下:
xtype : 'gridcolumn',
dataIndex : 'smspresetname',
header : messageResource.sms_preset_content,
sortable : true,
width : 3,
renderer: function(value,metaData,record,colIndex,store,view) {
metaData.attr = 'ext:qtip='+ value;
return value;
}
即增加renderer属性,但对于metaData这个参数,其属性attr,4.X版本应该为tdAttr,同理,ext:qtip应该为data-qtip,即extjs 4.X版本应为:
renderer: function(value,metaData,record,colIndex,store,view) {
metaData.tdAttr = 'data-qtip='+ value;
return value;
}
2、combox下拉选项中实现。
实现方法:通过tpl来实现。
效果图如下:
代码如下:
xtype : 'combo',
id : 'smspresetid',
width : 150,
editable:false,
mode :'local',
typeAhead: true,
triggerAction: 'all',
displayField : 'sms_value',
valueField : 'sms_key',
selectOnFocus : true,
allowBlank : false,
fieldLabel :messageResource.sms_preset_content,
store:smsPresetStore,
tpl:'<tpl for="."><div class="x-combo-list-item" ext:qtip="{sms_value}" >{sms_value}</div></tpl>'
主要增加的是最后一行tpl,其在tpl中还可以增加标题等复杂操作,这里不再详述。