ExtJS 4 - How to avoid grid column value becoming null when column editor is combo-box?

Question

I have a column in a grid with editor as combo-box.

When the grid is loaded then all the column values get displayed properly.

The issue is, when user clicks at the column (having combobox as editor) to edit it then the column value becomes null as shown in the attached screenshot.

I understand that the value becomes null as the store of combobox has not been loaded yet.

I can not use autoLoad true due to the heavy amount of data present in the combobox store. Moreover, even if I use autoLoad:true for the store with paging in it, then that too safeguards only those values which are present in the first page and not all.

Thus, how can I maintain the value in grid column when that value is not present in the store of combobox used as editor for the column?

Could anyone guide at this?

PS: I am using ExtJS Ver 4.0.2a

Answer 1

I have been able to find a solution for this.

It has more to do with the version of ExtJs. If we upgrade to 4.0.7 and then use forceSelection:false for a combobox then things work fine as expected. That is, the combo-box accepts a value which doesn't exist in its store and doesn't set the current value to null.

Hope this helps someone else too looking for something similar.

Answer 2

I would suggest having the grid record contain both that columns value, as well as display value. If the combo store lookup is unable to find a matching value (because that combo store hasn't been loaded yet), then revert to showing the display value stored with the grid record.

You might also need to have the afteredit event on the grid update that grid records display value after that column is edited for a particular row.