Ext checkbox(or checkboxgroup)实现鼠标悬浮提示(qtip)

checkbox大家都应该用过，在ext中，有时候checkbox的boxlabel显示的内容一般比较短，所以鼠标悬浮提示的功能有时候是比不可少的，由于ext的事件机制，开始时候使用ext.on,addlistener方法利用mouseover事件来做不过好像没起作用(如果有谁利用mouseover实现请共享一下代码，谢谢)，于是发现了一个办法，就是在checkbox的boxlabel中加上标签

boxLabel : '<span ext:qtip="aaa">aaa</span>',

 这样借助于ext的qtip轻松实现了checkbox的鼠标悬浮提示的功能。

详细代码如下：

Ext.onReady(function() {
	Ext.QuickTips.init();
	var indexconfigForm = new Ext.FormPanel({
		renderTo : document.body,
		title : 'RadioGroup',
		frame : true,
		width : 250,
		labelWidth : 50,
		labelAlign : 'top',
		margins : '0 0 5 0',
		bodyStyle : 'padding:5px 5px 5px 5px',
		autoScroll : true,
		items : [{
			xtype : 'fieldset',
			title : 'fieldset1',
			autoHeight : true,
			autoWidth : true,
			layout : 'form',
			cls : 'my-fieldset',
			items : [{
				id : 'szwlcheckboxgroup',
				xtype : 'checkboxgroup',
				fieldLabel : 'checkboxgroup1',
				columns : 2,
				items : [{
							boxLabel : '<span ext:qtip="aaa">aaa</span>',
							name : 'Tempw',
							width : '100%'
						}, {
							boxLabel : '<span ext:qtip="bbb">bbb</span>',
							name : 'Temps',
							width : '100%'
						}, {
							boxLabel : '<span ext:qtip="ccc">ccc</span>',
							name : 'conductivity'
						}, {
							boxLabel : '<span ext:qtip="ddd">ddd</span>',
							name : 'iss'
						}, {
							boxLabel : '<span ext:qtip="eee">eee</span>',
							name : 'detritus'
						}, {
							boxLabel : '<span ext:qtip="fff">fff</span>',
							name : 'TSS'
						}]
			}, {
				id : 'szhxcheckboxgroup',
				xtype : 'checkboxgroup',
				fieldLabel : 'checkboxgroup2',
				columns : 2,
				items : [{
							boxLabel : '<span ext:qtip="AAA">AAA</span>',
							name : 'cbods'
						}, {
							boxLabel : '<span ext:qtip="BBB">BBB</span>',
							name : 'cbodf'
						}, {
							boxLabel : '<span ext:qtip="CCC">CCC</span>',
							name : 'cbodu'
						}, {
							boxLabel : '<span ext:qtip="DDD">DDD</span>',
							name : 'alkalinity'
						}, {
							boxLabel : '<span ext:qtip="EEE">EEE</span>',
							name : 'ph'
						}, {
							boxLabel : '<span ext:qtip="FFF">FFF</span>',
							name : 'do'
						}, {
							boxLabel : '<span ext:qtip="GGG">GGG</span>',
							name : 'SODAndSpec'
						}]
			}]
		}]
	});
})

 运行界面：

 

注意： Ext.QuickTips.init();这句代码不可缺少，不然不会出现tip...