如何在ExtJS Grid的itemConfig的tpl字段中添加函数？

针对你在Sencha Architect 4.2.9 + ExtJS 7.3.3 Modern环境下，Grid行展开插件（rowexpander）的模板无法调用自定义函数的问题，提供两种可行解决方案：

方案一：直接使用XTemplate配置对象绑定函数 #

将tpl从字符串改为XTemplate的配置对象，把自定义函数作为XTemplate的成员传入，这样模板就能正确识别函数：

xtype: 'grid',
id: 'mygrid1',
itemId: 'mygrid1',
name: 'MyGrid1',
store: 'stTasks',
itemConfig: {
    xtype: 'gridrow',
    body: {
        tpl: new Ext.XTemplate(
            '<div>{[this.getResults()]}</div>',
            {
                getResults: function() {
                    return 'results';
                }
            }
        )
    }
},
plugins: [
    {
        type: 'rowexpander'
    }
]

如果在Sencha Architect中无法直接实例化XTemplate，可改用配置式写法：

itemConfig: {
    xtype: 'gridrow',
    body: {
        tpl: {
            html: '<div>{[this.getResults()]}</div>',
            getResults: function() {
                return 'results';
            }
        }
    }
}

方案二：将函数挂载到Grid实例，通过视图引用调用 #

把自定义函数定义在Grid本身的配置中，然后在模板里通过this.view访问Grid实例并调用函数：

xtype: 'grid',
id: 'mygrid1',
itemId: 'mygrid1',
name: 'MyGrid1',
store: 'stTasks',
// 定义自定义函数到Grid实例
getResults: function() {
    return 'results';
},
itemConfig: {
    xtype: 'gridrow',
    body: {
        tpl: '<div>{[this.view.getResults()]}</div>'
    }
},
plugins: [
    {
        type: 'rowexpander'
    }
]

原写法报错原因 #

你之前直接在body配置里添加getResults函数的方式无效，是因为模板执行时this指向的是XTemplate实例，而非body配置对象，所以无法找到该函数。必须将函数关联到XTemplate的作用域，或者通过可访问的外部实例（如Grid）来调用。

内容的提问来源于stack exchange，提问作者pa citrine