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

fnx2tebb  于 2022-09-26  发布在  其他
关注(0)|答案(1)|浏览(136)

朋友!我有一个网格,有一个小部件列。我从服务器获取商店的数据。我为每行获取不同的模板,并尝试在小部件中设置这些模板。但是,我无法在模板中显示数据。
这是我的小提琴示例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
            }
        } 
.......
    ] 
}
9rbhqvlz

9rbhqvlz1#

可以使用渲染器:

{
            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);

相关问题