当前位置: 代码迷 >> JavaScript >> Extjs4 中特定元素的tooltip之qtip提醒
  详细解决方案

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

热度:126   发布时间:2012-11-09 10:18:48.0
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 = '<tpl for="."><div class="x-combo-list-item" ext:qtitle="" ext:qtip="{text}">{text:ellipsis(12)}</div></tpl>';

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

?

?

}