如何在 Extjs 網格中屬於 itemConfig object 的 tpl 字段中添加 function ？

Question

我有一個帶有擴展插件的 ExtJs 網格。 （請注意，我使用 Sencha Architect 4.2.9 和 ExtJs 7.3.3 Modern）據我了解，我可以為擴展器插件的行添加 Ext.template 的唯一方法是將其寫入網格的itemConfig object .

xtype: 'grid',
id: 'mygrid1',
itemId: 'mygrid1',
name: 'MyGrid1',
store: 'stTasks',
itemConfig: {
    xtype: 'gridrow',
    body: {
        tpl: '<div>{title}</div>',
    }
},
plugins: [
    {
        type: 'rowexpander'
    }
],

如何將 function 添加到該 tpl？ 我發現的所有解決方案都不起作用，因為它們適用於創建新的 Ext.Template 對象，而不適用於 object 內的 tpl 字符串。 例如，以下代碼不起作用：

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

警告信息：

[W] XTemplate evaluation exception: this.getResults is not a function

我嘗試將 function object 放在任何有意義的地方，但無論我如何編寫它，我都無法從 tpl 內部調用它。 這似乎是一項微不足道的任務，但我現在已經為此苦惱了 3 天。

Answer 1

您必須在 XTemplate 的上下文中指定這些函數，因此如果字符串模板更早地創建一個新的 Ext.XTemplate 實例，您可以控制模板上下文，例如：

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

好的，找到了解決方案。 在這里發布它以供遇到相同問題的任何人將來參考。 事實證明，我必須將“tpl”設置為數組，第一個元素是模板字符串，第二個元素是包含 function的 object

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