View Full Version : Set default value for combobox

7 Jul 2012, 7:56 AM

I am learning Ext 4.1 It looks like a very powerful framework to me but at some points I get totally lost. This is one of them:

I have a combobox in a Ext.panel.grid. THe combobox is using an inline store. When rendered, the combobox is empty: I have to manually selected one of the options. I am not able to have the first item displayed by default _as if the user has manually selected it_ (emphasis added).

This is what I have:

var countryStore=Ext.create('Ext.data.Store',{

[...grid panel code omitted...]
displayField: 'name',
[...code omitted...]

Note that displayField='name' so the name of the country is displayed. The valueField='id' so on submit, my server side code receives the value of field 'id' of the chosen option.
For example, when the user selected 'Spain' from the combobox, what is sent on submit to the server is the value '3'. Likewise, when the user selected 'Italy from the combobox, what is sent to the server is the value '4' and not the string 'Italy'. Note that there is no Ajax formsubmit here, just a plain old form submit.
According to the docs the 'value' attribute's value is what is displayed by default in the combobox. So the line value:countryStore.getAt(0).get('name') shows the name of the first country in my store after rendering. That's fine. But when I submit the form with this default option selected the value of the combobox is not '1' as I expect but 'France'. Selecting countryStore.getAt(0).get('id') as the value to be displayed solves this problem but displaying '1' as the country makes no sense.
I am unable to find a solution to this problem. I find it hard to believe that there is no configuration option for such a simple issue. Is it really necessary to work with triggers, handlers and whatnot to have a simple defaultselectin in a combobox?


7 Jul 2012, 8:28 AM
'Sets the specified value(s) into the field. For each value, if a record is found in the store (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.form.field.ComboBox-cfg-store) that matches based on the valueField (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.form.field.ComboBox-cfg-valueField), then that record's displayField (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.form.field.ComboBox-cfg-displayField) will be displayed in the field.'

Not a config option but an event that has to be called after the comboBox is rendered.

8 Jul 2012, 4:22 AM
A few thoughts...

setValue is a method, not an event. Methods and events are very different things.

Using Ext.getCmp with a fixed id (like comboBox) is really bad practice. Some of the official demos do it but don't copy them.

I don't really follow where the grid fits into your scenario. Are you using the combobox as an inline editor? It makes a huge difference if you are.

Your id field is configured as 'numeric' but you're giving it string values, such as '1', '2', etc. This seems inconsistent. The field values will be automatically converted to numbers but why not use numbers to start with?

From everything I've seen of your code so far, using the value config is the correct way to do what you want to do. The value to pass in would be the id, not the name. You've mentioned that you tried that already but it didn't work. Not sure why this would be, perhaps some sort of type conversion problem.

Something quick you could try...

Get rid of setValue.
Add a config of value: '2' to the combobox.
Remove the type: 'numeric' from the id field's config.

That really should work. If it doesn't then you've got something really subtle going on.

8 Jul 2012, 1:57 PM
Finally the value config param works as advertised. I had to change the values in my store: the id field should contain integers, not strings:


should be


Probably that messed things up because now, when I set value:2, the value that is displayed in the combobox is 'England' and on submit the comnbobox' value is 2, not 'England'.

thanks for helping out,