Store dont load in renderer grid cell - extjs

Question

I´m trying to renderer a string in my column instead of your id. I founded this solution: Grid cell is rendering wrong, but it´s don´t work with a dynamic store.
In my grid I put a store to load into the renderer:
columns: [
{xtype : 'gridcolumn', text: 'Id', dataIndex: 'id'},
{xtype : 'gridcolumn', text: 'Validade', dataIndex: 'dataValidade', renderer: function(object){return Ext.Date.format(object, 'd-m-Y');}},
{xtype : 'gridcolumn', text: 'Complexo', dataIndex: 'id', renderer: function(value) {
storeComplexoPorValidade.getProxy().url = caminhoContexto + "validade/complexoporid/" + value + "/dados.json";
storeComplexoPorValidade.load();
console.log(storeComplexoPorValidade);
var idx = storeComplexoPorValidade.find('id', value);
var rec = storeComplexoPorValidade.getAt(idx);
return rec.get('descricao');
}
},
But the store don´t load the data to var, although perform the request. And I catch the error: Cannot call method 'get' of undefined.
What´s wrong?

Answer 1

You're getting the error because the store load is asynch, so the "return" from the renderer will complete before the response of your proxy request is received, processed, and made available to even be assigned to the variable you're trying to set.
I would suggest that you rethink your approach here. A couple options:
Load the store you're trying to use for the custom rendering prior to the creation of the grid
Expand your underlying data model for the grid's store with the extra fields that you need to perform the custom rendering. You can always mark these extra fields as non-persistent, so they will not be included in any write actions that might be performed on the model instance.

Answer 2

Thanks for your help, I have a lot work to make my script work. And with your tips I founded two others solutions that help me to put my code working. How to wait until all stores are loaded in ExtJs? and http://www.sencha.com/forum/showthread.php?197265-Loading-stores-synchronously
It´s my code working:
Ext.define('validade', {
extend: 'Ext.data.Model',
fields: [{name: 'id', type: 'int'},
{name: 'dataValidade', type: 'date', dateFormat:'Y-m-d'},
{name: 'complexo', type: 'string', persist: 'false' }]
});
Ext.define('ValidadeStore',{
extend: 'Ext.data.Store',
model: 'validade',
pageSize: itemsPerPage,
remoteSort: true,
sorters: [{
property : 'id',
direction: 'DESC'
}],
proxy: {
type: 'ajax',
url : '/validade/grid/dados.json',
reader : {
type : 'json',
root : 'data'
},
},
autoLoad: {
callback: function(records, operation, success){
var i = 0
loadComplexo();
function loadComplexo(){
if (i < records.length) {
var rec = records[i];
i++;
storeComplexo.getProxy().url = "validade/complexoporid/" + rec.get('id') + "/dados.json";
storeComplexo.load({
callback: function(records, operation, success){
var rec_ = records[0];
rec.set('complexo',rec_.get('descricao'));
loadComplexo();
}
});
}
}
}
}
});
Thanks a lot!