Extjs4 set tooltip on each column hover in gridPanel

问题

I am getting tooltip on mouse hover by each row for current column but I am unable to get next column tooltip on continue hover on same row.

But I can get it if I hover on another row & again hover any column of the previous row by using:

listeners:{
'itemmouseenter': function (view, record, item, index, e, eOpts) {
        var gridColums = view.getGridColumns();
        var column = gridColums[e.getTarget(this.view.cellSelector).cellIndex];
        Ext.fly(item).set({ 'data-qtip': 'Des:' + column.dataIndex });

  }
}

Can anyone show me what I'm missing or point me in the right direction?

回答1:

I was looking through this. I could manage to get the tool tip for each cell by doing something like this:

 Ext.getCmp('DynamicDemandGrid').getView().on('render', function(view) {
    view.tip = Ext.create('Ext.tip.ToolTip', {
        // The overall target element.
        target: view.el,
        // Each grid row causes its own seperate show and hide.
        delegate: view.cellSelector,
        // Moving within the row should not hide the tip.
        trackMouse: true,
        // Render immediately so that tip.body can be referenced prior to the first show.
        renderTo: Ext.getBody(),
        listeners: {
            // Change content dynamically depending on which element triggered the show.
            beforeshow: function updateTipBody(tip) {
                var gridColums = view.getGridColumns();
                var column = gridColums[tip.triggerElement.cellIndex];
                var val=view.getRecord(tip.triggerElement.parentNode).get(column.dataIndex);
                tip.update(val);
            }
        }
    });
});

Let me know if it helps

回答2:

I have an easy one, using the renderer function:

{
    xtype : 'gridcolumn',
    dataIndex : 'status',
    text : 'Status',
    renderer : function(value, metadata) {
                    metadata.tdAttr = 'data-qtip="' + value + '"';
                    return value;
                }
}

回答3:

{
    text: name,
    width: 80,
    dataIndex: dataIndex,
    sortable: true,
    listeners: {
        afterrender: function ()
        {
            Ext.create('Ext.ToolTip',
            {
                target: this.getEl(),
                anchor: direction | "top",
                trackMouse: true,
                html: this.text
            });
        }
    }
}

来源：https://stackoverflow.com/questions/7539006/extjs4-set-tooltip-on-each-column-hover-in-gridpanel

标签

tooltip

extjs4

gridpanel