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.

编辑

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屋！