PDA

View Full Version : ComboBox setValue with dynamic data Store



ukjbrown
17 Dec 2012, 3:35 AM
I have been attempting to create a form which acts as a View Record and Edit Record and have hit a wall doing something that I would have thought would be common practice...

I am using loadRecord to populate the form fields. Many of the fields are ComboBox fields with an underlying data store. In order to reduce the load time of the form, the stores are not autoloaded and I only want them to load their dataset when the user wants to change that field.

An example ComboBox definition is...



{ xtype: 'combobox',
fieldLabel: 'Depot',
name: 'depot',
displayField: 'description',
valueField: 'code',
store: 'lookup.Depots'
}


However, since the store is not loaded before the loadRecord method call, the ComboBox shows empty.

If I change the name config to a mapped field (e.g. depotDescription) then the value will correctly populate, but then the description is posted when the form is submitted rather than the code.

Is there a way to achieve this? I'm really surprised this isn't common practice - afterall, when the form is in "View" mode (before the user presses edit), there is absolutely no reason to load the stores, and also, until the user wants to change one of the combo values there is no reason to load the stores.

Any help would be much appreciated.

kaendsle
17 Dec 2012, 7:33 AM
Just to be clear: The trouble is that your human-readable ComboBox values (displayField values) are simply unavailable until you load the store. When a record is loaded you obtain the machine-readable value (valueField value) and this is what you want to send to the server when you update the record. So, you're right, you don't want to set the ComboBox value to the human-readable value; you'll be sending a value to the server it doesn't understand.

Though it may be unacceptable for some applications, a simple solution would be to set the ComboBox's value to the machine-readable value using setValue making sure that you have previously set some friendly message like "You chose..." to the valueNotFoundText param. Read up on this here:

(http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.field.ComboBox-method-setValue)http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.field.ComboBox-method-setValue

Then, if a user should decide to change the value of that field, you can set a listener tied to the ComboBox's "expand" or "focus" events (I'm not sure which would be better) to load the corresponding store i.e. if the user wants to change the value, he/she can see the full list after a short wait.