Extjs4 中特定元素的tooltip之qtip提醒-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20532 次

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：相当于创建一个模板对象。?

{

id:'q_cs',xtype:'combo',width:150,store:measurecombo,

valueField:'value',

displayField:'text',

mode:'local',

triggerAction:'all',

readOnly:true,

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>