Don’t let the Ext.form.ComboBox mess your good mood

I have spent a lot of time before I found the source of the following problem. In Ext JS (version 6) I use Ext.form.ComboBox combo boxes that have a (preloaded) store that loads application parameters from the server.

Every “parameter” store has a “key” and a “text” field that act as valueField and displayField for the combo box. I have the same model (Ext.data.Model) serving the same Ext.form.ComboBox extended combo box class as a different instance with each their own data (Ext.data.Store) from the server.

This article is about a situation where the combobox submits the displayField where you expect it to be the valueField.

Ext.data.Store

The store is autoLoaded, because in the application these parameter stores are used frequently, don’t change often and therefor to avoid server overhead. In your situtation this can be different.

Ext.data.Model

Ext.form.ComboBox

The function initComponent is called here to make the storeId unique.

As used in a view

Data received from the server

Ext.form

How it looks in the application

SH_014740

So far so good

Everything works just fine, but when selecting the first (35200) option that has the “key” of “01” the following data is sent back to the server after the form is submitted:

SH_014741

As you can see it is sending back the displayField (“35200 – TP-KZT…”) rather than the valueField (“01”). What is going wrong here?

Well let’s go back to something you possibly missed too in the image shown earlier on.

SH_014739_2

With the record received from the server there is a line break at the end of the “text” field (red circle). This makes that the record is not found by Ext JS when doing the form submit.

This is a way to clean your data with PHP from line-breaks before you save it to your database or send it on the request.

After removing this line-break it is sending this to the server:

SH_014742

And that is what we would expect from the beginning. So before you totally renovate your application and slowly get dazed and confused, look at your data first. Maybe it has some line-break that is messing with your good mood.

Documentation

Ext.form.ComboBox

Johan van de Merwe
Dedicated to professional software development since 1985. Has worked since 1992 as IT manager in several international operating companies. Since 2007 CEO and Sencha Ext JS web application developer at Enovision GmbH.

Leave a Reply

Time limit is exhausted. Please reload CAPTCHA.