Editable grid combobox value vs text?

[sazma]

I've copied the "plant" example and am trying to modify it to my needs. I'm using a JSON reader instead of XML and the grid gets populated correctly, with the one exception of the combo box. I see the value of the variable (which is what is in my JSON) rather than the text I assumed it'd see. In your example, the value and the text are the same, obviously. I could translate the text on the backend, but I figured there's probably some way to do it with EXT.

Here's what my select looks like:


<select name="service" id="service" style="display: none">
<option value="1">propage</option>
<option value="2">DOAS</option>
<option value="3">cingular</option>
<option value="4">verizon</option>
<option value="5">satellink</option>
</select>

Instead of seeing the text, I'm seeing the numbers. Is there some magic?

Thanks!

[ad_dnk_studio]

Jack, I also have the same problem: when I select something in ComboBox, which is a cell of a GridEditor, the value of the selected item is showed instead of a text (innerHTML of an option). Could you please help to solve this problem?

[ad_dnk_studio]

I've already tried the example which you gave here http://extjs.com/forum/showthread.php?t=3145&highlight=combobox but i met a problem:

grid.on('afteredit', function(e)
{
if(e.field == 'strProxyIP')
{
e.record.data['strProxyIP'] = empCB.getRawValue();
e.record.set(e.record.data['strProxyIP'], empCB.getRawValue());
}
});

Every time I set the value empCB.getRawValue() in this function to e.record.data['strProxyIP'] it is being overwritten by the value of selected item in ComboBox

[KRavEN]

Make sure the hidden select that you showed earlier is in the body.

Javascript should look like this:


Ext.onReady(function(){
var converted = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'service',
width:135,
forceSelection:true
});
combo.applyTo('local-service');
});


Make sure you have this in your body:

<div>
<input type="text" id="local-service" size="20"/>
</div>

[tab]

I had a similar problem and just kept trying things (the shotgun approach). This works

header: "status",
dataIndex: 'status',
width: 100,
editor: new Ed(new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
displayField:'value',
mode: 'local',
triggerAction: 'all',
emptyText:'Select a status...',
selectOnFocus:true,
store: dsstatus,
editable:false

}))
And I moved on without trying to understand why. I believe it was the addition of mode:local that did it, but? Anyway my combobox works with jsonReader.

[ad_dnk_studio]

KRavEN, tab, thanks for trying to help, but this is not a solution of mine and sazma's problem.

Maybe I could solve this task if I knew the right sequence of events. As far as i know they appear in this order:

1) beforeedit
2) validateedit
3) ??? <unknown event>
4) afteredit
5) ??? <unknown event>

[tierneyja]

I have the same issue. There are a number of places we use a <select>'s value that is different than its text (textNode).

I have updated to 1.0.1a and the issue still exists. In looking at the comboBox code and adding alerts throughout, I see that the <select> it self is actually working correctly. The issue is that when I mouse away from the <select>, I only see the value in the grid. Which makes sense in that I need the grid to store the value and pass it back to the server. However, this isn't what a user wants to see, obviously.

To resolve this, are these the correct options available to me?
1) Create a renderer for dropdowns. This will be a little heavy, but would have to 'lookup' the text(textNode) based on the value and render the text(textNode).
2) Use hiddenName to store the value in a hidden column (does this work or is only for Forms?) and another column to display the text(textNode).

If there is another 'standard/official' or better practice for displaying the text in an Edit Grid, please let me know. If not, any suggestions on whether #2 would even be possible would be helpful. As far as I can tell, #1 will work. I will try to use the existing <select> to do the traverse the options in the <select>. If anyone has already built this renderer, please share your code. If not, I will post something if I can make it generic enough.

Thanks in advance.
Jim

[jsakalos]

I use custom renderer for combos. This way it's also solved in the 2nd of 2 grid screencasts. Have you seen them? If not search for grid+screencast; they are worth to see.

[tierneyja]

Thanks Jozef.

No, I haven't watched the 2nd grid screencast. I will take a look now. Thanks for confirming the approach and pointing me to this screencast, I appreciate it.
Jim

[sshinde]

Guys, very good discussion over the inside of issue. =D>

First of all Merry Christmas to you all.

If possible, can you post the URL to "grid+screencast" mentioned by jsakalos. I couldn't search it.

Thanks

[Condor]

This screencast (http://www.sencha.com/learn/Screencast:Editable_Grid_Component), but be warned: This is for Ext 1.x!

Here is a more recent screencast (http://tdg-i.com/325/ext-js-screencast-data-stores-and-gridpanels) about grids.