[SOLVED] I can't get to work a EditorGrid with Comboboxes

[alexdreamer]

Hi to all,

I am new to Ext, and I am very impressed with these amazing libraries. I would like to say that the developers are doing a great job and I would like to give thank to them for this amazing project.

Until now, I have been able to solve all my problems by myself or by searching in this forum, but now I don't find a solution for this. I have seen some threads about this topic, but it seems nobody found a solution.

I created a LayoutDialog, and then, I rended a EditorGrid inside it. I use two ComboBoxes to let the user select an item. If you see the images I attached, you can imagine what is happening:

image1: This is the Dialog with the EditorGrid and ComboBoxes. When loading it, the grid renders correctly the values of the fields, showing the related field in the foreing table (the comboboxes are loading it data from a foreing table).

image2: I select another item from one ComboBox, in this example, I chose "Cliente", whose internal ID is "CLI".

image3: Once selected, the Combo shows the item correctly.

image4: If I click outside that comboBox, the text changes and it shows the value, not the corresponding text.

I have been using ComboBoxes in forms and they work perfectly, but it seems they don't work in EditorGrids....


Here is the code I have used (taken from an example, and I think it is correct):





////////////////////////////////////////////////////////////////////////////////////////////
// DataStores for the ComboBoxes
////////////////////////////////////////////////////////////////////////////////////////////
var ds_fk_aplicacion = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'some url'
extraParams: {sort:'nombre', dir:'ASC'}
}),
reader: new Ext.data.JsonReader(
{root: 'resultados', totalProperty: 'total', id: 'id'},
[
{name: 'id', type: 'string'},
{name: 'nombre', type: 'string'}
]
)
});
ds_fk_aplicacion.load();
var ds_fk_rol = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'some url',
extraParams: {sort:'nombre', dir:'ASC'}
}),
reader: new Ext.data.JsonReader(
{root: 'resultados', totalProperty: 'total', id: 'id'},
[
{name: 'id', type: 'string'},
{name: 'nombre', type: 'string'}
]
)
});
ds_fk_rol.load();

////////////////////////////////////////////////////////////////////////////////////////////
// Column model for the DataGrid
////////////////////////////////////////////////////////////////////////////////////////////
var cm_permisos = new Ext.grid.ColumnModel([
{
dataIndex: 'id',
header: 'id',
id: 'id',
hidden: true
},{
dataIndex: 'fk_aplicacion',
header: 'Aplicación',
id: 'fk_aplicacion',
width: 120,
editor: new Ext.grid.GridEditor(
new Ext.form.ComboBox({
store: ds_fk_aplicacion,
displayField: 'nombre',
valueField: 'id',
hiddenName: 'fk_aplicacion',
mode: 'remote',
editable: false,
forceSelection: true, emptyText:'Seleccione aplicación...',
lazyRender: true
})
)
},{
dataIndex: 'fk_usuario',
header: 'Usuario',
id: 'fk_usuario',
width: 120,
hidden: true
},{
dataIndex: 'fk_rol',
header: 'Rol',
id: 'fk_rol',
width: 250,
editor: new Ext.grid.GridEditor(
new Ext.form.ComboBox({
store: ds_fk_rol,
displayField: 'nombre',
valueField: 'id',
hiddenName: 'fk_rol',
mode: 'remote',
editable: false,
forceSelection: true, emptyText:'Seleccione rol...' ,
lazyRender: true
})
)
}
]);
cm_permisos.defaultSortable = true;
////////////////////////////////////////////////////////////////////////////////////////////
// DataStore for the DataGrid
////////////////////////////////////////////////////////////////////////////////////////////
var ds_permisos = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'some url'
}),
reader: new Ext.data.JsonReader(
{root: 'resultados', totalProperty: 'total', id: 'id'},
[
{name: 'id', type: 'int'},
{name: 'fk_aplicacion', type: 'string'},
{name: 'fk_usuario', type: 'string'},
{name: 'fk_rol', type: 'string'}
]
),
remoteSort: true
});
ds_permisos.setDefaultSort('fk_aplicacion', 'ASC');
////////////////////////////////////////////////////////////////////////////////////////////
// DataGrid
////////////////////////////////////////////////////////////////////////////////////////////
var grid_permisos = new Ext.grid.EditorGrid('cuadro-dialogo-center-form', {
ds: ds_permisos,
cm: cm_permisos,
trackMouseOver: true,
monitorWindowResize: true,
enableColumnHide: false,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
autoExpandColumn: 'fk_aplicacion'
});

grid_permisos.render();

/************************************************************/
var dlgPermisos;
if (!dlgPermisos)
{
dlgPermisos = CreateDialog("Permisos", 500, 350, true, true, false, false, true, false, false);
dlgPermisos.addButton('Cerrar', function() {dlgPermisos.hide();});
var layout_d = dlgPermisos.getLayout();
layout_d.beginUpdate();
layout_d.add('center', new Ext.GridPanel(grid_permisos));
layout_d.endUpdate();

dlgPermisos.show();
};

ds_permisos.load();



Please, could someone help me solve this problem? I don't know if it's a bug or just I don't know how to make it works. I would really appreciate any idea to solve this problem, because I don't know what to do. And this is a feature I really need for my project, because it is very useful feature for many applications.




Thank you very much in advance.

Regards,

Alex

[Wolfgang]

Hello,

Have a look at this thread:
http://extjs.com/forum/showthread.php?t=3145&page=2
There you find a file attachent that implements a combobox in an editorgrid that addresses the issue you have.

Regards

Wolfgang

[alexdreamer]

Hi Wolfgang!

I tried what you said. First it does not work, but the reason was I had a problem with the data I collected from the database. After solving that problem, the EditorGrid worked and the comboBoxes worked very well too.

So, the trick is to use a renderer, isn't it? I didn't find anything about renderers at the documentation, so I was totally lost.

Thank you very much for you help, Wolfgang, I really appreciate it. I hope I can help you some day.

Kind regards from Spain,

Alex.