如何动态为widgetcolumn设置不同的TPL

Question

朋友们！ 我有一个网格，带有一个小部件列。我从服务器获取商店的数据。 我为每一行获取不同的模板，并尝试在我的小部件中设置这些模板。但是，我无法显示模板中的数据。

这是我的示例小提琴 https://fiddle.sencha.com/#fiddle/3j41& ;view/editor

我希望第二列显示具有不同模板的数据。我看到的不是数据而是{testName}。 在第三列中一切正常，但它是静态数据

你能帮我理解出了什么问题吗？

我的结果：

我的商店：

var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'tplConfig'],
    data: [{
        name: 'Test 1',
        tplConfig: {
            tplBody: '<div><b>Name:</b> {testName}</div> <div>any text</div>',
            tplData: {
                testName: 'Alex'
            }
        }
    }  ]
});
 

我的网格：

{
    xtype: 'grid',
    title: 'Widget Column Demo',
    store: store,
    columns: [
.....
 {
     xtype: 'widgetcolumn',
     text: 'Dynamic',
     width: 120,
     dataIndex: 'tplConfig',
     widget: {
         xtype: 'component',
         tpl: '{tplBody}',
         //data: '{tplData}' //it's not working
            }
        } 
.......
    ] 
}

Answer 1

您可以使用渲染器：

        {
            xtype: 'gridcolumn',
            text: 'Dynamic',
            width: 120,
            dataIndex: 'tplConfig',
            renderer: function(tplConfig) {
                var t = new Ext.Template(tplConfig.tplBody);
                
                return t.apply(tplConfig.tplData);
            }
        }

或用作1衬里：

                return new Ext.Template(tplConfig.tplBody).apply(tplConfig.tplData);