ComboBox renderer for EditorGridPanel

[nkohari]

ComboBoxes support displaying a different value (the displayField) from each record than the value that's actually sent back when the form is posted (the valueField). When you use a ComboBox as an editor for a cell in the EditorGridPanel, there doesn't seem to be an easy way to display the "display value" in the grid, rather than the "value value".

To solve this problem, I wrote this very simple renderer generator:



Ext.namespace("Ext.ux");
Ext.ux.comboBoxRenderer = function(combo) {
return function(value) {
var idx = combo.store.find(combo.valueField, value);
var rec = combo.store.getAt(idx);
return rec.get(combo.displayField);
};
}

Then, you can use it like this:



var store = new Ext.data.SimpleStore({
fields: [ "value", "text" ],
data: [
[ "value1", "Option 1" ],
[ "value2", "Option 2" ],
...
]
});

var combo = new Ext.form.ComboBox({
store: store,
valueField: "value",
displayField: "text",
...
});

var gridPanel = new Ext.grid.EditorGridPanel({
...
columns: [{
editor: combo,
renderer: Ext.ux.comboBoxRenderer(combo)
}]
});

Now, the value that is displayed in the grid will match the value that the user selects from the combo box. Obviously, your combo box must define a displayField and a valueField.

If there's an easier way to do this, please let me know. :)

[emptyness]

Hi :)
Thanx very much for your code; I was having exactly the problem you reported, in following the example on Grid Editing...
http://extjs.com/deploy/dev/examples/grid/edit-grid.html

Your solution is very effective, but I have a problem.. When I request to Add a new row, using the callback implementation coming from the example above, Firebug reports the following error:

rec has no properties
(reported at the line -> ) return rec.get(combo.displayField);

I made this little change to your renderer, in the point it returns from the call:

return (rec == null ? '' : rec.get(combo.displayField) );

I'm a newbie with Ext-js (and also with Javascript), so any hint or correction from you will be greatly appreciated! :D

Thank you again

[yeya]

well, i use something else from the edit grid screencast tutorial, and do the same and it's works for the render, but when you gonna save changes and you have more edit cell like a text cell, and you don't modified the combo , but the row is dirty, the grid displayText and not the id, but if you modified the combo the grid have the value.

The true is i have to ask for the column, to know is the cell have a value or a text, but is another easy and direct way to doit?

I glad for you answers.

[radic]

Hey thank you for this short script, was searching the api all over but it seems there was no functionality for this.

What I do notice though, that it takes a pretty long time (~2 seconds to load) and afterwards the app is a bit slow, any ideas how to improve that ? (im only using a combobox with 4 values)
This seems to be the case with firefox only btw, IE6 does it really quick

[loic]

Thanks a lot nkohari. That simply solves a problem I have.
A possible new entry for the mjlecomte's grid faq in my opinion.

[pokerking400]

it is not working.

[pokerking400]

works..i have editorgrid on top of combo....

so i have to say editor.field to get to combo....

Thanks for the code....it helps.:)

[pokerking400]

Do you know how to add option group in the combo box? Thanks.

[durlabh]

You might also want to refer to my post at http://extjs.com/forum/showthread.php?t=34691&highlight=combobox+renderer.

The major differences I found and had accounted for are:

When the value isn't in store, this extension will show an error.
As far as I know, find method on store by default matches strings starting with. If there is a value "1" and "11" and user selects the data with value "11", renderer will still return 1.

[joao_candido]

Thank you guy !!!

[lvanderree]

I had (of course) the same issue.

In my implementation I added an option to show preloaded values (from your grid or form), so your remote combobox-datastore doesn't need to be filled.

for my implementation see this thread:
http://extjs.com/forum/showthread.php?t=37781

[ulisses.gomes]

Tankz a Lot!

:D

[vivitron]

This is great... solves my problem.

I normally use the grid editor with dynamically created controls, and so I often want to create the ComboBox inline.

You can use the renderer still like this:
renderer: function(value, meta, record, row, col, store) { return Ext.ux.renderer.ComboRenderer({ value: value, meta: meta, record: record, combo: newGrid.getColumnModel().getCellEditor(col, row).field }); }

where newGrid is the grid object.

Thanks again!

[yumusakg]

This is great... solves my problem.

I normally use the grid editor with dynamically created controls, and so I often want to create the ComboBox inline.

You can use the renderer still like this:
renderer: function(value, meta, record, row, col, store) { return Ext.ux.renderer.ComboRenderer({ value: value, meta: meta, record: record, combo: newGrid.getColumnModel().getCellEditor(col, row).field }); }

where newGrid is the grid object.

Thanks again!

this was very helpful @vivitron.

[yumusakg]

for preloaded values i developed a new method.

1. i added an extra field to store which holds the "displayField". it is not shown in grid.

{
name: 'id',
type: 'string'
},
{
name: 'id_display',
type: 'string'
}
2. displayField's name is sent to ComboBoxRender function.

renderer: function(value, meta, record, row, col, store) {
return Ext.ux.renderer.ComboBoxRenderer({
value: value,
meta: meta,
record: record,
row: row,
col: col,
store:store,
combo: comboApplier,
displayField: 'id_display'
});
}

3. in ComboBoxRender


if (idx == -1)
return options.record.get(options.displayField);
else {
var rec = options.combo.store.getAt(idx);
return rec.get(options.combo.displayField);
}

[pratik016]

Hey,
I am also using a EditorGridPanel and having a combobox with valueField and displayField.
I don't know why u guys not having that problem what I have.

After using this script, after change the combobox value I can get the displayField not valueField that works fine.
But on loading grid all fields set to NULL.
---
So I changed something in your code and works rocking now :)

<code>
var idx = combo.store.find(combo.valueField, value);
if (idx == -1) return value; // I added this line for show all values from loading :):)
var rec = combo.store.getAt(idx);
return (rec == null ? '' : rec.get(combo.displayField) );
</code>

Thanks for script

[logive]

Ext.ns("Ext.ux.renderer");
Ext.ux.renderer.ComboRenderer = function(options) {
var value = options.value;
var combo = options.combo;
var returnValue = value;
var valueField = combo.valueField;

var idx = combo.store.findBy(function(record) {
if(record.get(valueField) == value) {
returnValue = record.get(combo.displayField);
return true;
}
});

// This is our application specific and might need to be removed for your apps
if(idx < 0 && value == 0) {
returnValue = '';
}

return returnValue;
};
Ext.ux.renderer.Combo = function(combo) {
return function(value, meta, record) {
return Ext.ux.renderer.ComboRenderer({value: value, meta: meta, record: record, combo: combo});
};
}

---------------------------------------------------------------------------------------
{
header: '币制',
dataIndex: 'rptype',
sortable: true,
width: 95,
editor: rptypeFun("rptype",'','rpTypeAction_listAll.do'),
renderer:Ext.ux.renderer.Combo(Ext.getCmp('rptype'))
},

[bee]

Hi guys, I am getting as undefined combobox even if I set mode as local. I am populating one combobox from simplestore and other from jsonstore.

[robboerman]

Hi Guys and Gals,

After struggling with the exact same problem I decided to implement a solution that solves it for me. I have put it up on my blog (http://www.robboerman.com/2011/05/combobox-editor-remote-and-renderer-for-extjs-editorgridpanel/) and a new forum post (http://www.sencha.com/forum/showthread.php?134243-ComboBox-editor-and-renderer-for-EditorGridPanel-that-works-with-remote-store-(V3)).

Hope it helps you as it did me!

Rob

[cbmeeks]

Thanks!

Been fighting this for two hours.