Rallygrid 上的工具提示

Question

我正在寻找为 rallygrid 实现自定义工具提示的示例。我曾尝试在列上使用渲染器配置，但到目前为止运气不好。有人有工作示例吗？

谢谢！

Answer 1

更新：为了确保工具提示的正确计时和删除，我在工具提示上调用了 showNow() 方法并使用了它的 destroyAfterHide 配置属性

    listeners: {
        itemmouseenter: function(g, record, item, index, e, eOpts) {
            console.log(record.get('FormattedID'));
            Ext.create('Rally.ui.tooltip.ToolTip', {
                target : item,
                destroyAfterHide: true,
                hideDelay: 0,
                html: '<p><strong>This is a tooltip: ' + record.get('FormattedID') + '</strong></p>'
            }).showNow();

这是使用 Rally.ui.tooltip.Tooltip 和 rallygrid 的完整示例：

Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
    Ext.create('Rally.data.wsapi.Store', {
        model: 'userstory',
        autoLoad: true,
        listeners: {
            load: this._onDataLoaded,
            scope: this
        },
        fetch: ['FormattedID', 'Name', 'ScheduleState', 'Tasks', 'Defects']
    });
},
_onDataLoaded: function(store, data) {
    var records = _.map(data, function(record) {
        return Ext.apply({
            TaskCount: record.get('Tasks').Count
        }, record.getData());
    });

    this.add({
        xtype: 'rallygrid',
        showPagingToolbar: false,
        editable: true,
        store: Ext.create('Rally.data.custom.Store', {
            data: records
        }),
        listeners: {
            itemmouseenter: function(g, record, item, index, e, eOpts) {
                console.log(record.get('FormattedID'));
                Ext.create('Rally.ui.tooltip.ToolTip', {
                    target : item,
                    destroyAfterHide: true,
                    hideDelay: 0,
                    html: '<p><strong>This is a tooltip: ' + record.get('FormattedID') + '</strong></p>'
                }).showNow();
            },
            select: this.getRecordOnSelectedRow,
            load : function(g, record, index, options){
                this.getRecordOnSelectedRow(g, record, 0, options);
            },
            scope: this
        },
        columnCfgs: [
            {
                xtype: 'templatecolumn',
                text: 'ID',
                dataIndex: 'FormattedID',
                width: 100,
                tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
            },
            {
                text: 'Name',
                dataIndex: 'Name'
            },
            {
                text: 'Schedule State',
                dataIndex: 'ScheduleState',
            },
            {
                text: '# of Tasks',
                dataIndex: 'TaskCount',
            },
            {
                text: '# of Defects',
                dataIndex: 'Defects',
                renderer: function(value) {
                    return value.Count;
                }
            }
        ]
    });
},
getRecordOnSelectedRow:function(g, record, rowIndex, options){
    console.log(record);
}

});

Rallygrid 上的工具提示

Tooltip on Rallygrid

tooltip

rally