向 ExtJS 检查列添加工具提示

Question

我在 Ext.tree.Panel 中有一个 ExtJS checkcolumn：

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