如何在属于Extjs网格中itemConfig对象的tpl字段中添加函数?

thigvfpy  于 2022-09-26  发布在  其他
关注(0)|答案(2)|浏览(194)

我有一个带扩展插件的ExtJ网格*(请注意,我使用的是Sencha Architect 4.2.9和ExtJs 7.3.3 Modern)*据我所知,为扩展插件的行添加Ext.template的唯一方法是将其写入网格的itemConfig对象中。

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

如何向该tpl添加函数?我找到的所有解决方案都不适用,因为它们面向创建新的Ext.Template对象,而不是对象内的tpl字符串。例如,以下代码不起作用:

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

警告消息:

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

我已经尝试将函数对象放在任何有意义的地方,但无论我如何编写,都无法从tpl内部调用它。这似乎是一项微不足道的任务,但我已经为此苦恼了三天。

vltsax25

vltsax251#

您必须在XTemplate的上下文中指定这些函数,因此,如果字符串模板在前面创建了一个新的Ext.XTemplat示例,您可以在其中控制模板上下文,例如:

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

2fjabf4q2#

好的,找到了解决方案。将其发布在此处,以供将来遇到相同问题的任何人参考。事实证明,我必须将“tpl”设置为数组,第一个元素是模板字符串,第二个元素是包含函数的对象

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

相关问题