ComboBox Grid editor issue

[arthurakay]

I've been searching for answer to this question, but have been unable to find someone with exactly the same problem...

I'm using a ComboBox() for an editor in one of my grid's columns. The ComboBox() uses a remote data source. Here's a look at the code:

{
            header: 'Template Name', 
            dataIndex: 'TemplateCode', 
            id: 'TemplateCode',
            width: 200,
            editor: new Ext.form.ComboBox({
                allowBlank: true,
                displayField: 'Value',
                emptyText: 'Select a value',
                mode: 'local',
                selectOnFocus: true,
                store: new Ext.data.JsonStore({
                    baseParams: { 
                        companyCode: thisEntity.companyCode,
                        containerType: thisEntity.containerType
                    },
                    url: Basan.URL.CharacteristicTemplate.listAllUrl(),
                    sortInfo: { field: 'Value', direction: "ASC" },
                    listeners: {
                        'load': function(store, recordArray, options) {
                            var recordTemplate = Ext.data.Record.create([
                                { name: 'Key' },
                                { name: 'Value' }
                            ]);

                            store.insert(
                                0,
                                new Array(
                                    new recordTemplate({ Key: Basan.UI.emptyGuid, Value: '<< NONE >>'})
                                )
                            );
                        }
                    }
                }),
                typeAhead: true,
                triggerAction: 'all',
                valueField: 'Key',
                listeners: { 
                    'select': function(thisBox, selectedRecord, index) {
                        dropDownRecord.fieldName = 'TemplateName';

                        if (selectedRecord.get('text') == '<< NONE >>') {
                            dropDownRecord.value = '';
                        }
                        else {
                            dropDownRecord.value = selectedRecord.get('text');
                        }
                    },
                    'focus': function(thisBox) {
                        thisBox.getStore().load();
                    }
                }
            }),
            renderer: function renderer(val, cell, record) {
                var displayName = record.get('TemplateName');

                if (displayName === '') {
                    return '';
                }
                else {
                    return displayName;
                }
            }
        } 

For starters, the column renderer works perfectly - no problems there.

The problem I'm seeing is a result of latency (see attached images). When the user clicks into the cell to select a value, the ComboBox() displays the underlying value for a split second. Once the data store has loaded, the ComboBox() displays the correct display value.

I'm guessing there's a way for me to override the default display of that ComboBox(), but I've been unsuccessful in trying to do so. Can anyone point me in the right direction?