extjs 给gridpanel和combox增加qtip提示

工作中可能遇到这样的问题：使用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中还可以增加标题等复杂操作，这里不再详述。