How can I add a function inside the tpl field that belongs to the itemConfig object in an Extjs grid? - extjs

Question

I have an ExtJs grid with the expander plugin. (Note that I use Sencha Architect 4.2.9 and ExtJs 7.3.3 Modern)
As I understand it, the only way I can add an Ext.template for the rows of the expander plugin is by writing it inside the itemConfig object of the grid.
xtype: 'grid',
id: 'mygrid1',
itemId: 'mygrid1',
name: 'MyGrid1',
store: 'stTasks',
itemConfig: {
xtype: 'gridrow',
body: {
tpl: '<div>{title}</div>',
}
},
plugins: [
{
type: 'rowexpander'
}
],
How can I add a function to that tpl? All solutions I have found don't work as they are geared towards the creation of new Ext.Template objects, and not for tpl strings inside an object.
For example, the following code doesn't work:
itemConfig: {
xtype: 'gridrow',
body: {
tpl: '<div> {[this.getResults()]} </div>',
getResults: function() {
return 'results';
}
}
},
Warning message:
[W] XTemplate evaluation exception: this.getResults is not a function
I have tried putting the function object anywhere that makes sense, but I can not call it from inside the tpl no matter how I write it.
It seems like such a trivial task, but I'm scratching my head over this for 3 days now.

Answer 1

You must specify those functions in the context of the XTemplate, so instead if string templates create a new Ext.XTemplate instance earlier, where you have control of template context, for example:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.Viewport.add({
xtype: 'grid',
id: 'mygrid1',
itemId: 'mygrid1',
name: 'MyGrid1',
store: 'stTasks',
columns: [{
name: 'value',
dataIndex: 'value'
}],
data: [{
value: 'a'
}, {
value: 'b'
}],
itemConfig: {
xtype: 'gridrow',
body: {
tpl: new Ext.XTemplate('<div> {[this.getResults()]} </div>', {
getResults: function () {
return 'results';
}
})
}
},
plugins: [{
type: 'rowexpander'
}],
});
}
});

Answer 2

Ok, found a solution.
Posting it here for future reference to anyone that encounters the same problem.
It turns out I had to set the "tpl" as an array, with the first element being the template string, and the second element being an object containing the function
itemConfig: {
xtype: 'gridrow',
body: {
tpl: [
'<div> {[this.getResults()]} </div>', {
getResults: function() {
return 'results';
}
}
]
}
},