I'm trying to implement a custom renderer which manages two fields from a grid - for the first field a simple string is returned, and for the second I query the database:
...
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);
}
}
...
The problem is that within the renderer function, I'm calling an Ext.Direct method (which is asynchronous). I've tried both promises and callbacks and ended up with this ugly code (just wrapped all the conditions in the Ext.Direct callback), which doesn't work - it does not return the values:
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;
}
});
}
What should I do? What is the most elegant solution?
