title: Asynchronous data retrieving and rendering in ExtJS with Ajax
body: <p>so I have this situation:</p>
  
  <pre><code>renderer: function(value, grid, record) {
                    var testAjax = function(callback) {
                      Ext.Ajax.request({
                        url: appConfig.baseUrl + '/api/users/' + record.getData().id + '/jobRoles',
                        method: 'GET',
                        success: function(result) {
                          callback(result)
                        };
                      });
                    };
                    return testAjax(function(result) {
                      try {
                        result = JSON.parse(result.responseText);
                      } catch(e) {
                        return '';
                      }
                      result = result.data;
                      var roles = _.map(result, function(jRole) {
                        console.log(jRole);
                        return jRole.name;
                      }).join(',');
                      console.log("Roles: ", roles);
                      return roles;
                    });
                  }
  </code></pre>
  
  <p>What I wanted to achieve is that when I have to render a particular field, I make a call to my Loopback endpoint, retrieve some data about a relation, map it using a "," character and return the joined string in order to view it.</p>
  
  <p>However, I think I have a few problem with callbacks here as I don't see the result at all, as if the function is returning before the callback is called (thus showing nothing instead of what I retrieved from the server).</p>
  
  <p>I tried to look here and there, and this is the best I came up with.</p>
  
  <p>How can I return to the parent function the "roles" variable? How do I properly set up my callbacks?</p>
  
  <p>Regards</p>