Tooltip on 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); 
} 

});