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.
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';
}
}
]
}
},