View Full Version : Grid Cell editing: Multiselect Combobox with custom renderer for nested data

18 Nov 2013, 9:19 AM

I'm having a grid with the cell editing plugin attached. The grid is presenting data and using a renderer for the field that's presenting nested data.

This is the column showing nested data:

xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var unitsStore = record.units();
var units = [];
return units.join(', ');
dataIndex: 'units',
text: 'Artists',
flex: 3,
editor: {
xtype: 'boxselect',
itemId: 'artistEditor',
autoSelect: false,
displayField: 'name',
forceSelection: true,
queryMode: 'local',
store: 'Units',
valueField: 'unitId'
},<other columns>

As you see, the dataIndex property is not really neccessary because the display value is overridden by the render function, but Architect 3 forces me to enter one.
My problem is the following: If I now double-click the cell to open the combobox, I need to preselect the existing field values in the combobox. To achieve this, I added a beforeedit event binding to the cell editing plugin to call the setValue() on my combobox editor and feed it with the correct values (which are NOT the one displayed, but some IDs I need to select the values in the combobox. This works fine UNTIL the cell editors startEdit() function is called. In this function the setValue() function is called AGAIN with the value that I create in my render function. Of course this value doesn't exist in the combox store, and therefore the selection is cleared.

Is there a way to solve this problem? Unfortunately the default events of the combobox are suppressed within the startEdit function and the plugins beforeedit event is fired before startEdit() is called. So, I'm a little bit lost here.


18 Nov 2013, 9:35 AM
something like this?

i would use the same dataIndex for the grid column + value field for the combo.

you can assign renderers to both (listConfig -> see link for the combo).

18 Nov 2013, 10:18 AM
Well, that's not actually my problem. The thing is, that I cannot show nested data in a grid view directly. In my case it's something like this (beware! it's dummy data ;-) ):

"records" : [{
"title":"Enter Sandman",
"units": [{
"name":"Dream Theater"
"title":"Bodom After Midnight",
"name":"Children Of Bodom"
"comments":"Here are some comments"

In the column renderer I concatenate a string from the units names and build something like "Metallica; Dream Theater" (for the first Track). Using the record.units() methods to get the data. The dataIndex of the grid is completely useless in this case.
I hope that makes problem a little bit clearer.

22 Nov 2013, 2:04 AM
Does no one has any other ideas?
I came accross this solution (http://appointsolutions.com/2011/05/combobox-editor-remote-and-renderer-for-extjs-editorgridpanel/) for ExtJs 3 but it seems that there is no solution for ExtJs 4.2.