ExtJs 4.2 : how renderer this combobox with store.query - extjs

Question

My application is in MVC.
I have a grid with columns, and one of these columns has a with a renderer. This grid opens when the user clicks on an other grid.
When I load my application and I click to open this grid, this column (and the others after) don't load. But when I close and I re-open this grid, the columns are loaded.
I don't know where the problem is (moreover, this problem doesn't appear on the development server...)
I do a console.log(Ext.getStore('sTypesJours')) : I have some records
Then I do a console.log(Ext.getStore('sTypesJours').query('uid', val, false, false, true)) : I have no records the first time, but after re-open it works...
This is the code of my grid:
Ext.define('KGest.view.grille.Modif', {
extend: 'Ext.grid.Panel',
xtype: 'grillemodif',
title: 'Elements déjà saisis',
store: 'sGrilleModif',
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
itemId: 'toptoolbarService',
items: [
{
xtype: 'button',
id: 'save-button-grillemodif',
text: 'Sauver les modifications',
iconCls: 'x-icon-save',
action: 'update',
dock: 'top',
scope: this
}
]
}
],
selType: 'rowmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
columnLines: true,
viewConfig: {
deferEmptyText: false,
emptyText: 'Aucune donnée déjà saisie'
},
initComponent: function() {
var me = this;
me.selModel = Ext.create('Ext.selection.CheckboxModel', {
listeners: {
selectionchange: function(sm, selections) {
Ext.getCmp('validall-button-grillemodif').setDisabled(selections.length === 0);
Ext.getCmp('supprall-button-grillemodif').setDisabled(selections.length === 0);
}
},
injectCheckbox: 7 // position de la colonne des checkbox
});
Ext.apply(me, {
columns: [
{
text: 'Journée',
dataIndex: 'journee',
allowBlank: false,
xtype: 'datecolumn',
format: 'd/m/Y',
width: 100,
editor: {
xtype: 'datefield',
submitFormat: 'Y-m-d'
}
},
{
text: 'Type de jour',
dataIndex: 'uid_types_saisies',
flex: 1,
editor: {
xtype: 'combobox',
store: Ext.create('KGest.store.sTypesJours'),
valueField: 'uid',
displayField: 'libelle',
typeAhead: true,
queryMode: 'remote',
emptyText: 'Sélectionnez un type de jour',
listeners: {
beforequery: function(queryEvent, eOpts) {
var tabFilter = new Array();
tabFilter[0] = {"property": "uid_salaries", "value": Ext.getCmp('uid_salaries').getValue()};
queryEvent.combo.store.proxy.extraParams.filter = JSON.stringify(tabFilter);
}
}
},
renderer: function(val) {
if (val > 0) {
var srvStore = Ext.getStore('sTypesJours');
detail = srvStore.query('uid', val, false, false, true);
sortie = detail.getAt(0).data.code;
}
return sortie;
}
},
{
text: '1/2<br/>jour',
dataIndex: 'demi_jour',
xtype: 'checkcolumn',
width: 50
}
]
});
me.callParent(arguments);
}
});
Does anyone have any ideas?

Answer 1

Best I can offer (6 months after question asked) is this:
timing is everything, a field 'renderer' formats the cell-data at onload() time - meanwhile, instantiating and retrieving data to the store within the renderer function (when store-array is not-yet populated) returns undefined, by the time the next grid-load occurs, voila, there's the populated store, you get results from the query..
Probably solved this long ago, but load the store (autoload: true) or instantiate 'store' outside scope of grid-definition (before layout/renderer's are invoked)