iteye_11754
iteye_11754
2012-05-09 15:48
浏览 479
已采纳

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

RT,哪一个知道,找了好久了没搞定!

鼠标放到某一行只能提示固定列,方法如下:
[code="java"]
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'));
                        }
                    }
                });

             });  
         }  
     }

[/code]


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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • iteye_3843
    iteye_3843 2012-05-10 15:43
    已采纳

    列上加监听,我第一次回复的时候就建议你这样做。
    [code="java"]{
    xtype: 'gridcolumn',
    dataIndex: 'name',
    text: 'Name',
    listeners: {
    columnshow: {
    fn: me.onGridcolumnColumnshow,
    scope: me
    }
    }
    }

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

    点赞 评论
  • iteye_3843
    iteye_3843 2012-05-09 17:44

    提供一种思路:
    在colomn上加监听
    [code="java"]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
    );
    }[/code]

    点赞 评论
  • iteye_3843
    iteye_3843 2012-05-10 14:41

    先把列的index取到,然后就可以拿到dataindex了
    [code="java"]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);
    }

    }

    });

    }); [/code]

    点赞 评论
  • weixin_42596953
    weixin_42596953 2016-06-30 15:40

    可以直接在column的renderer函数中操作metaData项来动态的添加提示,示例如下:
    [code="js"]
    {
    xtype: 'gridcolumn',
    dataIndex: 'name',
    width:200,
    align:'left',
    editor:'textfield',
    text: '名称',
    renderer: function(v, m, r){
    m.tdAttr = 'data-qtip="'+v+'"';
    return v;
    }
    },
    [/code]

    点赞 评论

相关推荐