PDA

View Full Version : ComboBox in RowEditor not populating remote json data



martinrame
29 Jun 2012, 5:20 AM
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
2 Jul 2012, 4:36 AM
Any hint?

stimpy
2 Jul 2012, 4:42 AM
@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
2 Jul 2012, 4:51 AM
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
2 Jul 2012, 4:59 AM
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
11 Feb 2013, 7:59 AM
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
12 Feb 2013, 12:02 AM
I've managed to solve the issue.
All you need to do is set queryMode to 'local' in the comboBox.

murrah
7 Nov 2013, 4:03 PM
I've managed to solve the issue.
All you need to do is set queryMode to 'local' in the comboBox.

That is not a solution if your combo is actually pulling data dynamically from the server. You nee queryMode 'remote' for that.