ComboBox in RowEditor not populating remote json data

[martinrame]

I'm trying to implement a RowEditing plugin that has a column where the user can select data from a combobox.

This is the column definition for my combo box editor:


{
xtype: 'gridcolumn',
dataIndex: 'idproducto',
text: 'Producto',
editor: {
xtype: 'combobox',
store: 'Productos',
displayField: 'nombre',
valueField: 'idproducto',
mode: 'local',
selectOnFocus: true,
triggerAction: 'all'
}
},


As you can see, it references the store "Productos". Here it is:


Ext.define('MyApp.store.Productos', { extend: 'Ext.data.Store',
requires: [
'MyApp.model.Producto'
],
autoLoad: true,
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
pageSize: 30,
remoteSort: true,
remoteFilter: true,
buffered: true,
model: 'MyApp.model.Producto',
proxy: {
type: 'ajax',
api: {
read: '/cgi-bin/clientes.cgi/productos/read',
create: '/cgi-bin/clientes.cgi/productos/insert',
update: '/cgi-bin/clientes.cgi/productos/update',
destroy: '/cgi-bin/clientes.cgi/productos/delete'
},
reader: {
type: 'json',
idProperty: 'idproducto',
totalProperty: 'total',
successProperty: 'success',
root: 'root'
},
filterParam: 'query',
simpleSortMode: true
}
}, cfg)]);
}
});


The store references model Producto:


Ext.define('MyApp.model.Producto', { extend: 'Ext.data.Model',
idProperty: 'idproducto',
fields: [
{
name: 'idproducto',
type: 'int'
},
{
name: 'nombre'
},
{
name: 'version'
},
{
name: 'fabricante'
}
],
proxy: {
type: 'ajax',
url: '/cgi-bin/clientes.cgi/productos/read',
reader: {
type: 'json',
idProperty: 'idproducto',
totalProperty: 'total',
successProperty: 'success',
root: 'root'
},
filterParam: 'query',
simpleSortMode: true
}
});


When I open the Developer's tool window in Chrome, I can see in Network tab the request to /cgi-bin/clientes.cgi/productos/read, it returns this:


{ "root" : [
{
"fabricante" : "BBBB",
"version" : "3.1.1",
"idproducto" : 1,
"nombre" : "AAAA"
},
{
"fabricante" : "BBBB",
"version" : "3.2.1",
"idproducto" : 2,
"nombre" : "AAAA"
},
{
"fabricante" : "Brand",
"version" : "1.0.3.8",
"idproducto" : 3,
"nombre" : "G-RIS"
},
{
"fabricante" : "Brand",
"version" : "1.0",
"idproducto" : 4,
"nombre" : "G-PACS"
}
]
}


I've read many forums and examples, and it seems I'm doing everything corerrect, but it doesn't show the Productos list. What I'm doing wrong?.

[martinrame]

Any hint?

[stimpy]

@martinrame

Check to see if your store is actually getting populated correctly.

I had a similar problem in the past and that was part of the problem.

I will look and see if I can find my notes.

[martinrame]

Yes, the store is loaded correctly. Also I found something very strange.

My app has two tabs. On the first tab, there's a grid containing the row editor with the "Productos" combo, that is not loaded (but the store's load method is called I can see it on Chrome's developers tools->network).

On the 2nd tab, there's a grid that points to the same Productos store. If I click on the 2nd tab, the grid is filled with the store, then, if I go back to the first tab, then double click on a row, my row editor shows the Productos combo correctly.

I can't understand why the combo is not loaded when I'm on the 1nst grid.

[martinrame]

This should work automatically, by just setting the store property on my combobox's config. But, as it doesn't seem to work, I've added an "beforeedit" event handler to my 1nst tab controller as this:



onBeforeCliProdEdit: function(editor, e){
this.getProductosStore().load({
console.log("Store loaded, but combo not populated :(");
});
},
init: function() {
this.control({
"gridpanel[id=clientesproductosgrid]": {
beforeedit: this.onBeforeCliProdEdit,
scope: this
}
});


As you can see, the store's load method is called, but the combobox is not loaded.

[rpieter]

I'm experiencing exactly the same problem.
Only if I 'unfold' the dropdown first, then trigger the code that fills the store again (using loadRawData), and then click the combo again to unfold it, the data is properly shown... :-/

[rpieter]

I've managed to solve the issue.
All you need to do is set queryMode to 'local' in the comboBox.