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

Question

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

这是我的例子fiddlehttps://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);

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

How to dynamic set different tpl for widgetcolumn

grid

extjs

widget