使用异步函数调用在网格中渲染列

Question

我正在尝试实现一个自定义渲染器，该渲染器管理网格中的两个字段-对于第一个字段，返回一个简单的字符串，对于第二个字段，我查询数据库：

...

columns: [{
                dataIndex: 'id',
                width: 50,
                text: 'ID',
                field: {
                    type: 'textfield',
                    allowBlank: false
                },
                renderer: function(value, metaData, record, row, col, store, gridView){

                    return DirectTest.app.getController("PersonalInfo").renderUsername(value, record, col);

                  }
            }, {
                dataIndex: 'username',
                flex: 1,
                text: 'Username',
                field: {
                    type: 'textfield',
                    allowBlank: false
                },
                renderer: function(value, metaData, record, row, col, store, gridView){

                    return DirectTest.app.getController("PersonalInfo").renderUsername(value, record, col);

                  }
            }
...

问题是在渲染器函数中，我正在调用Ext.Direct方法（该方法是异步的）。我已经尝试了promise和回调，最后得到了这个丑陋的代码（只是将所有条件包装在Ext.Direct回调中），它不起作用-它不返回值：

renderUsername: function(value, record, col){

        var col = col;
        return QueryDatabase.getResults({page: 1, start: 0, limit: 25}, function(provider, response){
            console.log(response.result[0]);
            console.log("col = "+col);
            switch(col){
                case 0:
                    return "Lilly is a fluffy cat";
                    break;

                case 1:
                    return response.result[0].username;
                    break;
                }

        });

    }

我该怎么办？什么是最优雅的解决方案？