Search code examples
extjssencha-touchextjs7

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


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.


Solution

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