How to use asynchronously fetched data in an XTemplate in ExtJS 4-5

Question

I have a data view configured with a tpl and a store. That loads fine. But some of the variables for each record/template need to be fetched in a consecutive step by calling a different external url for each record/template.

Ext.define('MyView', {
    extend: 'Ext.view.View',
    store: 'myStore',
    tpl: [ 
        '<tpl for=".">',
        '    <div class="social">',
        '        <div>{id}</div>',
        '        <div>{firstname}</div>',
        '    </div>',
        '</tpl>'
    ],
    itemSelector: 'div.social'
});

How can I set some variable values asynchronously by calling an url that responds with a json object holding those values for each record in the store after those are rendered in the view with the template?

According to the answer to this question on SO, it's not possible. According to this post, it is: "The most powerful feature of the tpl option is that the data can be changed later to update what is displayed on the page."

Answer 1

Normally you want your backend to return all the data you need at once (in order to reduce number and time of requests). If your backend can't do that and/or you can't control that, you may want to look into Ext JS's associations.
In theory, once the XTemplate calls an association that is not loaded yet, it'll make the load request (through the proxy that is configured for the model of the association), which should then fire an "update" event on the record, which should then fire an "update" event on the store, which should then trigger a DataView refresh.