Trying to figure out how to embed exjs components in xtemplate.

Data:

"data": [ {"id":1,"started_at":"22.04.2016","name":"same title","score":"value","ratio1":-202,"ratio2":-303,"ratio3":1147,"selection":1,"statistic":"1, 22, 12"}, {"id":1, "started_at":"22.04.2016", "name":"same title","score":"value", "ratio1":-202, "ratio2":-303, "ratio3":1147, "selection":1, "statistic":"1, 22, 12"} ]

Code:

 Ext.create('Ext.Component', { id: this.myClassName + data.id, renderTo: Ext.get(Ext.query(".results-container." + this.myClassName + " > table")), tag: 'table', cls: 'results-container-inner', tpl: new Ext.XTemplate( '<tpl for="data">', '<table cellspacing="0" cellpadding="0" class="results-row" data-id="{id}">', '<tr>', '<td valign="top">{id}</td>', '<td valign="top">{started_at}</td>', '<td valign="top">{name}</td>', '<td valign="top"><a href="#" class="stat-open" data-id="{id}">{value}</td>', '<td valign="top">{ratio1}</td>', '<td valign="top">{ratio2}</td>', '<td valign="top">{ratio3}</td>', '<td valign="top" class="btn" data-num="{id}"></td>', '<td valign="top" class="cbox" data-num="{id}"></td>', '</tr>', '</table>{statistic}', '</tpl>'), listeners: { afterrender: function (el) { var renderEl = el.getEl().down('td.btn'); new Ext.Button({ text: 'test', renderTo: renderEl }); } } }); row.update(data);

There is an idea to do this:

 var parent = this; Ext.get(Ext.query(".results-container." + this.myClassName + " > table .btn")).each(function () { new Ext.Button({ text: 'test', tooltip: 'test', renderTo: this, handler: parent.btnHandler, scope: parent }); });

But it seems to me a crutch, is there a solution to add to the afterrender? Using alert, I found out that the content appears after this event.

    0