Question

我在checkcolumn中有一个ExtJS 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的{{1}}中）？

Answer 1

如果我做对了，你想在列中的每个项目上显示工具提示。为了做到这一点，你可以像这样使用渲染的列：

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

对于checkcolumn：

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

将工具提示添加到ExtJS检查列

1 个答案: