Extjs4在每个列上设置工具提示悬停在gridPanel中

时间:2011-09-24 12:29:37

标签: tooltip extjs4 gridpanel

我正在获取当前列的每一行鼠标悬停的工具提示,但我无法在下一列工具提示上继续将鼠标悬停在同一行上。

但如果我在另一排上徘徊,我就可以得到它。再次使用以下方法悬停上一行的任何列:

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 });

  }
}

有人能告诉我我缺少的东西或指向正确的方向吗?

3 个答案:

答案 0 :(得分:29)

我有一个简单的,使用渲染器功能:

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

答案 1 :(得分:5)

我正在看这个。我可以通过这样的方式设法获得每个单元格的工具提示:

 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);
            }
        }
    });
});

如果有帮助请告诉我

答案 2 :(得分:2)

{
    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
            });
        }
    }
}