使用Ajax在ExtJS中进行异步数据检索和呈现 [英] Asynchronous data retrieving and rendering in ExtJS with Ajax

问题描述

所以我有这种情况:

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

我想要实现的是，当我必须渲染特定字段时，我调用我的Loopback端点，检索有关关系的一些数据，使用，"字符将其映射并按顺序返回连接的字符串查看它.

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.

但是，我认为这里的回调存在一些问题，因为我根本看不到结果，就好像该函数在调用回调之前返回一样(因此什么也不显示，而不是我从服务器检索到的结果)

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).

我试图四处寻找，这是我想出的最好的结果.

I tried to look here and there, and this is the best I came up with.

如何将"roles"变量返回到父函数?如何正确设置我的回调?

How can I return to the parent function the "roles" variable? How do I properly set up my callbacks?

致谢

推荐答案

您不能也不应将渲染器与加载操作和异步回调一起使用.如果您过滤，排序或仅刷新网格视图，则对于同一条记录，渲染器可以被调用数十次.您要做的就是在单个调用中获得在网格中显示所需的所有信息.您不能在单个调用中获得的数据不应显示在网格中.您不希望为1000个记录调用1000次端点，因为即使每个调用仅需要60毫秒，这也就是一整分钟.

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) {
                }
            }
        });
    }
}

这将在第一次调用渲染器时调用后端，并异步填充显示的记录的temp变量.填充temp变量后，渲染器将自动显示temp变量中的值.

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.

这篇关于使用Ajax在ExtJS中进行异步数据检索和呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！