Extjs4 中特定元素的tooltip之qtip提示

阅读更多

1. 在grid panel的每一行显示，使用qtip

  {

	                id:'company',
	                text: 'Company',
	                sortable: true,
	                align :'center',
	                dataIndex: 'company',
	                width:120,
	                flex: 1,
	                //增加这个函数，用于显示每行的提示信息
                    renderer: function(value,metaData,record,colIndex,store,view) {
			       	 	metaData.tdAttr = 'data-qtip="'+value+'"';
			       	 	console.log(record);//在console中打印出record的值
			        	return value;
				  	}

 

  其中的 value 就是要显示qtip的字符串，可以自己定制，这个函数中有个叫record的参数，里面有存放该行的记录，详情可用console.log(record)打印出来。

 

2. 在 tree panel中提示每个node 使用qtip

 

 

[{"id":"${parentId}001","parentId":"${parentId}","text":"百度","order":2,"icon":"","type":"iframe","leaf":true,"url":"http://www.baidu.com"},
 {"id":"${parentId}002","parentId":"${parentId}","text":"图表","order":20,"icon":"","type":"iframe","closeable":"true","leaf":true,"url":"${path}/test/chart.action"},
 {"id":"${parentId}003","parentId":"${parentId}","qtip":"进度条Grid33333333333333344444444444444444444444444444444444444444444444444444444444444444","text":"进度条Grid33333333333333344444444444444444444444444444444444444444444444444444444444444444","order":30,"icon":"","type":"iframe","closeable":"true","leaf":true,"url":"${path}/test/pBarGrid.action"},
 {"id":"${parentId}004","parentId":"${parentId}","qtip":"测试1","text":"测试1","order":40,"icon":"","type":"iframe","closeable":"true","leaf":true,"url":"${path}/test/menuform.action"}]

 

 主要在长字符串的时候需要使用到这个功能

 

下文转自：http://hi.baidu.com/lvsiquan/blog/item/540f26bf2b9b7e1c19d81fed.html

 

经常会给表格的某列加上悬浮提示，把过长的内容显示出来，所以得加上qtip属性，网上拿来一截代码，可以用的，如下： 1、 在JS中加上 Ext.QuickTips.init(); 2、重写renderer方法       {         header:'项目',         dataIndex:'item',         renderer:function(data, metadata, record, rowIndex, columnIndex, store){             metadata.attr = 'ext:qtip="' + data + '"';               return data;      }  }   给combox加上悬浮提示（首先加上  Ext.QuickTips.init(); 才能实现）： 1. var tpl = ' text}">{text:ellipsis(12)} '; tpl是var tplO = new Ext.XTemplate()里面的字符串，在combox里面定义配置项tpl：相当于创建一个模板对象。    2. {   id:'q_cs',xtype:'combo',width:150,store:measurecombo, valueField:'value', displayField:'text', mode:'local', triggerAction:'all', readOnly:true, tpl:tpl     }