我的技术贴的首发地址:http://atian25.javaeye.com/

天猪部落阁 - (ExtJS && AS3 && Java)

专注于ExtJS && AS3 && Java

常用链接

统计

FLASH

WORK

友情链接

最新评论

[原创]ExtJS Grid tooltip的几种实现方式

http://atian25.javaeye.com/blog/417361

1.表头提示

在2.2里面是设置ColumnModel.tooltip ,3.0则是Column. tooltip 如下:

1 var grid = new Ext.grid.GridPanel({  
2   columns:[  
3     {header:'名称',dataIndex:'name',tooltip:'对象名称'},  
4     {header:'开始时间 - 结束时间 <br/>成功/失败/成功率', dataIndex:'sucRate',tooltip:'成功/失败/成功率'}  
5   ]  
6 });

2.单元格提示

1)使用Ext.QuickTips

在开始的时候就执行Ext.QuickTips.init();

然后对需要提示的单元格,重写renderer函数,添加ext:qtitle , ext:qtip这2个属性即可。

这个在官方的FAQ上有详细描述: http://extjs.com/learn/Ext_FAQ_Grid#Add_ToolTip_or_Qtip

代码:


 1 //option 1  
 2 //========  
 3 renderer = function (data, metadata, record, rowIndex, columnIndex, store) {  
 4     //build the qtip:  
 5     var title = 'Details for&nbsp;' + value + '-+ record.get('month') +  
 6         '-+ record.get('year');  
 7     var tip = record.get('sunday_events');  
 8    
 9     metadata.attr = 'ext:qtitle="' + title + '"+ ' ext:qtip="' + tip + '"';  
10    
11     //return the display text:  
12     var displayText = '<span style="color: #000;">+ value + '</span><br />+  
13         record.get('sunday_events_short');  
14     return displayText;  
15 };  
16    
17 //option 2  
18 //========  
19 renderer = function (data, metadata, record, rowIndex, columnIndex, store) {  
20     var qtip = '>';  
21     if(data >= 0){  
22         qtip = " qtip='yeah'/>";  
23         return '<span style="color:green;"+ qtip + data + '%</span>';  
24     }else if(data < 0){  
25         qtip = " qtip='woops'/>";  
26         return '<span style="color:red;"+ qtip + data + '%</span>';  
27     }  
28     return data;  
29 };  
30    
31 //option 3  
32 //========  
33 var qtipTpl = new Ext.XTemplate(  
34     '<h3>Phones:</h3>',  
35     '<tpl for=".">',  
36     '<div><i>{phoneType}:</i> {phoneNumber}</div>',  
37     '</tpl>'  
38 );  
39    
40 renderer = function (data, metadata, record, rowIndex, columnIndex, store) {  
41    
42     // get data   
43     var data = record.data;  
44    
45     // convert phones to array (only once)   
46     data.phones = Ext.isArray(data.phones) ?  
47         data.phones :   
48         this.getPhones(data.phones);  
49    
50     // create tooltip   
51     var qtip = qtipTpl.apply(data.phones);  
52    
53     metadata.attr = 'ext:qtitle="' + title + '"+ ' ext:qtip="' + tip + '"';  
54    
55     //return the display text:  
56     return data;      
57 };

2)使用ToolTip

官方也已经给出方法:

http://extjs.com/forum/showthread.php?p=112125#post112125

http://extjs.com/forum/showthread.php?t=55690

以上给出的方法是可以让一个grid里面的元素共享一个tooltip对象。一般用来做rowtip

不过3.0有更好的方式,如下:

 

3.行提示 RowTip

ExtJS3.0新增的方法,设置tooltip的delegate

代码:


 1 var myGrid = new Ext.grid.gridPanel(gridConfig);  
 2 myGrid.on('render', function(grid) {  
 3     var store = grid.getStore();  // Capture the Store.  
 4   
 5     var view = grid.getView();    // Capture the GridView.  
 6   
 7     myGrid.tip = new Ext.ToolTip({  
 8         target: view.mainBody,    // The overall target element.  
 9   
10         delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.  
11   
12         trackMouse: true,         // Moving within the row should not hide the tip.  
13   
14         renderTo: document.body,  // Render immediately so that tip.body can be referenced prior to the first show.  
15   
16         listeners: {              // Change content dynamically depending on which element triggered the show.  
17   
18             beforeshow: function updateTipBody(tip) {  
19                 var rowIndex = view.findRowIndex(tip.triggerElement);  
20                 tip.body.dom.innerHTML = "Over Record ID " + store.getAt(rowIndex).id;  
21             }  
22         }  
23     });  
24 }); 

4.其他方法

监听GridView或Store的事件,然后通过rowSelector或getRow方法来遍历,自己加tooltip... 这个方式请无视吧

posted on 2009-07-01 10:14 天猪 阅读(2216) 评论(0)  编辑  收藏


只有注册用户登录后才能发表评论。


网站导航: