怎么设置EXT4 GRID鼠标悬停在列上，弹出提示层显示列内的内容？

0 0

怎么设置EXT4 GRID鼠标悬停在列上，弹出提示层显示列内的内容？15

RT，哪一个知道，找了好久了没搞定！
--------------------------------------------
鼠标放到某一行只能提示固定列，方法如下：

listeners: {  
             render: function(g) {  
                 //g.on("itemmouseenter", function(grid, row, col) { 
				 g.on("itemmouseenter", function(view,record,mode,index,e) {
					 
                     grid.tip = Ext.create('Ext.tip.ToolTip', {
						target: view.el,          // The overall target element.
						delegate: view.itemSelector, // Each grid row causes its own seperate show and hide.
						trackMouse: true,         // Moving within the row should not hide the tip.
						renderTo: Ext.getBody(),  // Render immediately so that tip.body can be referenced prior to the first show.
						listeners: {              // Change content dynamically depending on which element triggered the show.
							beforeshow: function updateTipBody(tip) {
								tip.update(view.getRecord(tip.triggerElement).get('name'));
							}
						}
					});

                 });  
             }  
         }

_____________________
怎么动态获取鼠标所在列的dataIndex？？？

问题补充：

jobar 写道

提供一种思路：
在colomn上加监听

columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'name',
                            text: 'Name',
                            listeners: {
                                afterrender: {
                                    fn: me.onGridcolumnAfterRender,
                                    scope: me
                                }
                            }
                        },
。。。
]


 onGridcolumnAfterRender: function(abstractcomponent, options) {
        var el = abstractcomponent.getEl();
        el.on(
        'mouseover',
        function(e,t){
            var panel = Ext.widget('panel',{
                width:100,
                height:100,
                items:[{
                    xtype: 'button',
                    text: 'click me'
                }]
            });
            panel.show();
        },
        this
        );
    }

已经给gird加上了tip，tip中的内容用

tip.update(view.getRecord(tip.triggerElement).get('name'));

给写死了，现在就想着怎么获取鼠标所在列的dataindex值这个提示功能就算完成了，不知道哥们能给我指条明路么？

问题补充：

jobar 写道

先把列的index取到，然后就可以拿到dataindex了

……

感谢你的指导，现在已经拿到列的dataIndex了。
——————————————————————————
目前的tip结果还是不正确，因为把itemmouseenter事件加在了grid的行上面
——————————————————————————
所以还是请问往列上加itemmouseenter事件怎么加，看API把我看晕列都。

问题补充：

jobar 写道

列上加监听，我第一次回复的时候就建议你这样做。

{
                            xtype: 'gridcolumn',
                            dataIndex: 'name',
                            text: 'Name',
                            listeners: {
                                columnshow: {
                                    fn: me.onGridcolumnColumnshow,
                                    scope: me
                                }
                            }
                        }

.....
    onGridcolumnColumnshow: function(ct, column, options) {
//这里写逻辑代码
    }

-----------------------------------------------------
鸭梨好大，我还是没整出来。不过分还是给你把，感谢啊！
我想给列上加鼠标停留上的事件。你给的这个方法不知道咋用。
╮(╯▽╰)╭
onGridcolumnColumnshow: function(ct, column, options)
这个方法是加到每个column定义的里面么？
-----------------------------------------------------

ext4

2012年5月09日 15:48

九牛一毛
22
0 0 0

4个答案按时间排序按投票排序

0 0

采纳的答案

列上加监听，我第一次回复的时候就建议你这样做。

{
                            xtype: 'gridcolumn',
                            dataIndex: 'name',
                            text: 'Name',
                            listeners: {
                                columnshow: {
                                    fn: me.onGridcolumnColumnshow,
                                    scope: me
                                }
                            }
                        }

.....
    onGridcolumnColumnshow: function(ct, column, options) {
//这里写逻辑代码
    }

2012年5月10日 15:43

jobar
527
0 0 5

添加评论

0 0

可以直接在column的renderer函数中操作metaData项来动态的添加提示，示例如下：

{
                        	   xtype: 'gridcolumn',
                        	   dataIndex: 'name',
                        	   width:200,
                        	   align:'left',
                        	   editor:'textfield',
                        	   text: '名称',
                        	   renderer: function(v, m, r){
                        	   	    m.tdAttr = 'data-qtip="'+v+'"'; 
                        	   	    return v;
                        	   }
                           },

2016年6月30日 15:40

风不止树怎静
30
0 0 1

添加评论

0 0

先把列的index取到，然后就可以拿到dataindex了

g.on("itemmouseenter", function(view,record,mode,index,e) { 
var pos = view.getPositionByEvent(e);                                view.tip = Ext.create('Ext.tip.ToolTip', {  
                                   target: view.el,          // The overall target element.  
                                   delegate: view.itemSelector, // Each grid row causes its own seperate show and hide.  
                                   trackMouse: true,         // Moving within the row should not hide the tip.  
                                   renderTo: Ext.getBody(),  // Render immediately so that tip.body can be referenced prior to the first show.  
                                   listeners: {              // Change content dynamically depending on which element triggered the show.  
                                       beforeshow: function updateTipBody(tip) {  
                                           tip.update(view.getRecord(tip.triggerElement).get('name')); 
var dataIndex = view.getRecord(tip.triggerElement).fields.keys[pos.column];
                                           console.log(dataIndex);
                                       }  
                                   }  
                               });  
                            });

2012年5月10日 14:41

jobar
527
0 0 5

添加评论

0 0

提供一种思路：
在colomn上加监听

columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'name',
                            text: 'Name',
                            listeners: {
                                afterrender: {
                                    fn: me.onGridcolumnAfterRender,
                                    scope: me
                                }
                            }
                        },
。。。
]


 onGridcolumnAfterRender: function(abstractcomponent, options) {
        var el = abstractcomponent.getEl();
        el.on(
        'mouseover',
        function(e,t){
            var panel = Ext.widget('panel',{
                width:100,
                height:100,
                items:[{
                    xtype: 'button',
                    text: 'click me'
                }]
            });
            panel.show();
        },
        this
        );
    }

2012年5月09日 17:44

jobar
527
0 0 5