Extjs创建一个网格特征或网格插件，为网格中的每个列设置工具提示 [英] Extjs create a grid feature or grid plugin that sets a tooltip for each column in the grid

问题描述

这个问题有添加工具提示的答案：
Extjs4在gridPanel中的每个列上悬停的工具提示

This question has the answer to adding the tooltip: Extjs4 set tooltip on each column hover in gridPanel

我有一个后续问题，以解决这个问题的最高调的答案，这是修改渲染器功能添加如下所示的工具提示：

I have a follow up question to the most upvoted answer to this question, which is modifying the renderer function to add the tool tip like below:

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

我想要一个网格插件或功能设置使用上述实现的自定义工具提示。

I want to have a grid plugin or feature which sets a custom tooltip using the above implementation.

问题是如何添加我的东西，但同时不会剥夺用于特定网格的用户定义的渲染器功能。本质上，我想添加所有网格的工具提示功能，但不会剥夺某些网格上某些列的自定义渲染器的能力。

Question is how can I add my stuff but at the same time not take away a user defined renderer function being used for a particular grid. Essentially I want to add the tooltip feature for all grids, but not take away the ability to specify custom renderers for some columns on some of the grids.

我想可以作为一个可能的替代方案是另一个较少侵入的地方，我可以修改这个metadata.tdAttr值。可能是有人会知道的事件？

I guess what could be a possible alternative is another less invasive place where I could modify this metadata.tdAttr value. Maybe an event that someone would know about?

推荐答案

在你的插件 init 方法，您将能够循环遍历网格的列（构造函数和 initComponent 网格的方法此时已经被调用）。

In your plugins init method, you will be able to loop through the columns of the grid (the constructor and initComponent methods of the grid will have already been called at this point).

这意味着您可以检查每一列以查看用户是否设置了自定义渲染器。如果没有，您可以放置​​一个，如果有的话，您可以链接现有的渲染器与您的。

That means that you can inspect each column to see if the user has setup a custom renderer. If there is none, you can put your one, and if there is one, you can chain the existing renderer with yours.

编辑 / p>

EDIT

Ext.define('My.Plugin', {

    init: function(grid) {

        // You may not need the scope, but if you do, this binding will
        // allow to preserve the scope configured in the column...
        var pluginRenderer = Ext.Function.bind(this.renderer, this);

        Ext.each(grid.query('gridcolumn'), function(col) {
            var renderer = col.renderer;
            col.renderer = renderer
                ? Ext.Function.createSequence(renderer, pluginRenderer)
                : pluginRenderer;
        });
    }

    ,renderer: function(value, md) {

        // ...

        // You must return, in case your renderer is the only one (if
        // there is another one, this return will be ignored by createSequence)
        return value;
    }
});

这篇关于Extjs创建一个网格特征或网格插件，为网格中的每个列设置工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！