Asynchronous Data Retrieving And Rendering In ExtJS With Ajax

so I have this situation: renderer: function(value, grid, record) { var testAjax = function(callback) { Ext.Ajax.request({

Solution 1:

You cannot and should not use the renderer with load operations and asynchonous callbacks. The renderer can be called dozens of times for the same record, if you filter or sort or just refresh the grid view. What you want to do is get all the information required for display in the grid in a single call. Data you cannot get in the single call should not be shown in the grid. You don't want to call the endpoint 1000 times for 1000 records, because even if each call needs only 60ms, that's a full minute.

That said, if you really have to, because you cannot change the endpoints and the roles have to be displayed, you can do as follows:

dataIndex: 'MyTempRoles',
renderer: function(value, grid, record) {
    if(value) return value; // show the loaded value if available
    else { // no value loaded -> load value
        Ext.Ajax.request({
            url: appConfig.baseUrl + '/api/users/' + record.getData().id + '/jobRoles',
            method: 'GET',
            success: function(result) {
                try {
                    result = JSON.parse(result.responseText);
                    result = result.data;
                    var roles = _.map(result, function(jRole) {
                        console.log(jRole);
                        return jRole.name;
                    }).join(',');
                    record.set("MyTempRoles", roles || " "); // put the loaded value into the record. This will cause a grid row refresh, thus a call to the renderer again.
                } catch(e) {
                }
            }
        });
    }
}

This will call the backend in the first call to the renderer, and asynchronously fill the displayed record's temp variable. When the temp variable is filled, the renderer will then display the value from the temp variable automatically.