向 ExtJS 检查列添加工具提示

Question

我有一个 ExtJS

checkcolumn

在

Ext.tree.Panel

:

{
    xtype: 'checkcolumn',
    dataIndex: 'enabled',
    hideable: true,
    stateId: 'enabledColumn',
    width: 30,
    listeners: {
        checkchange: function (grid, rowIndex, checked, eOpts) {
            var tree = grid.up('processtree');
            tree.getController().onCheckChange(tree, rowIndex, checked);
        }
    }
}

我需要为此添加一个

tooltip

，其样式与同一网格中的其他列类似，即

{
    xtype: 'actioncolumn',
    width: 30,
    hideable: false,
    stateId: 'deleteColumn',
    items: [{
        icon: 'images/delete2.png',
        tooltip: 'Delete',
        handler: 'onDelete'
    }]
}

但是，除了声明工具提示可用于列标题之外，文档对其实现含糊其辞，这是不可取的，因为页面上的其他工具提示出现在各自列中的项目上。

如何将类似样式的工具提示应用到其他列？鉴于所有代码都分为单独的文件，此工具提示是否必须是单独的实体（单独的文件并在

Ext.tree.Panel

的

requires

中列出）？

Answer 1

如果我的理解正确，您希望在该列中的每个项目上显示工具提示。为此，您可以使用您想要的列的渲染，如下所示：

{
    xtype: 'gridcolumn',
    renderer: function(value, meta, record, row, col) {
        meta['tdAttr'] = 'data-qtip="the tooltip for ' + value + '"';
        return whatYouWantToDisplayInThatColumnsCell;
    }
}

对于检查列：

{
    xtype: 'checkcolumn',
    renderer: function(value, meta, record, row, col) {
        meta['tdAttr'] = 'data-qtip="the tooltip for ' + value + '"';
        return new Ext.ux.CheckColumn().renderer(value);
    }
}