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

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

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

Answer 2

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