Show cool things you have done with our products


Post by rdonahue6 »

Hi,

i am overriding the Gnt.template.TaskTooltip, however, tooltip is not coming.

Here are the things that i did
1:Override the TaskTooltip
Ext.define('TaskTooltipTamplate',{
			override : 'Gnt.template.TaskTooltip',
			
			disableFormats: true,
		    dateFormat: null,
            
		    markup: '<h2 class="sch-task-tip-header">{Name}</h2>' +
			'<table>'+
			'<tr><td>'+App.Nls['emxProgramCentral.Common.StartDate']+':</td> <td align="left">{[this.getStartDateString(values)]}</td></tr>'+
			'<tr><td>'+App.Nls['emxProgramCentral.Common.EndDate']+':</td> <td align="left">{[this.getEndDateString(values)]}</td></tr>'+
			'<tr><td>'+App.Nls['emxProgramCentral.Gantt.Tooltip.Progress']+':</td> <td align="left">{[this.getPercentDoneString(values)]}%</td></tr>'+
			'<tr><td valign="top">'+App.Nls['emxProgramCentral.Common.Assignee']+':</td><td width="100px" align="left">{[values.Assignee]}</td></tr>'+
			'</table>',
		    constructor: function() {
		        this.markup = markup || this.markup;
		        this.dateFormat = this.L('format');
		        this.callParent([
		            this.markup
		        ]);
		    },
		    getStartDateString: function(data) {
		        var task = data._record;
		        var date = data._useBaselineData ? task.getBaselineStartDate() : task.getStartDate();
		        return data._record.getDisplayStartDate(this.dateFormat, true, date, false, data._useBaselineData);
		    },
		    getEndDateString: function(data) {
		        var task = data._record;
		        var date = data._useBaselineData ? task.getBaselineEndDate() : task.getEndDate();
		        return data._record.getDisplayEndDate(this.dateFormat, true, date, false, data._useBaselineData);
		    },
		    getPercentCompleteString: function(data) {
		        var task = data._record;
		        var value = data._useBaselineData ? task.getBaselinePercentDone() : task.getPercentDone();
		        return Math.round(value);
		    }
		})
2: Set instance of my class totooltipTpl in in 'Gnt.panel.Gantt'.
 tooltipTpl  : new TaskTooltipTamplate()
Bryntum: 5.1.0
EXTJS: 6.0.2
Browser: Chrome.
Microsoft edge throwing following exception:

Object doesn't support property or method 'apply' at

tooltipString = view.tooltipTpl.apply(dataForMe);
if (!tooltipString) {
return false;
}

Am i missing something ? Please help.

Post by Terence »

Please provide a full working testcase, you can take one of our examples as a base.

Besides
Ext.define('TaskTooltipTamplate',{
    override : 'Gnt.template.TaskTooltip',
and
tooltipTpl  : new TaskTooltipTamplate()
Doesn't seem right. You need to extend the class,
[code]Ext.define('TaskTooltipTamplate',{
    extend : 'Gnt.template.TaskTooltip',
[/code]

... if you override the default tooltipTpl you do not have to set it on the tooltipTpl property because you've overriden (have changed) the existing class.

Post by rdonahue6 »

Thanks Terence, it helped to resolve the issue :D

However, with the following code of constructor, the dateFormat that i am setting in extended class got reset by
this.callParent([this.markup]);
.
constructor: function(markup,dateFormat) {
	this.markup = markup || this.markup;
	this.dateFormat = dateFormat;
	this.callParent([this.markup]);			
},
To solve this, i am setting dateFormat after
this.callParent([this.markup]);
constructor: function(markup,dateFormat) {
	this.markup = markup || this.markup;
	this.callParent([this.markup]);
	//Intentionally setting dateFormat after callParent.
	this.dateFormat = dateFormat;
},
I believe
Gnt.template.TaskTooltip
constructor should take dateFormat as input along with markup.

Thanks,
Pravin

Post Reply