How to dynamic set different tpl for widgetcolumn

Question

friends! I have a grid, with a widget column. I get the data for the store from the server. I get different templates for each row and try to set these templates in my widget. However, I am not able to display the data in the templates.

Here is my example fiddle https://fiddle.sencha.com/#fiddle/3j41&view/editor

I expect the second column to display data with different templates. Instead of data I see {testName}. In the third column everything works, but it's static data

Can you help me understand what's wrong?

My result:

My store:

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

My grid:

{
    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

You can use renderer:

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

or as a 1 liner:

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