ComboBox.setValue after on load sets wrong value

Question

I have combobox which represents login types retreived from serverside. Translation of login types should be done on clientside.

This is example of json returned from serverside:

[
  {"valueField":"activeDirectory"},
  {"valueField":"userpass"}
]

Combobox is defined like this:

Ext.create('Ext.form.ComboBox', {
    fieldLabel : window._i18n['login.login-panel.logintype'],
    itemId : 'logintype',
    store : loginTypesStore,
    name : 'loginType',
    hiddenName: 'hiddenName',
    displayField : 'localizedDisplayField',
    valueField : 'valueField',
    submitValue: true,
    forceSelection: true,
    editable : false,
    allowBlank : false,
    queryMode: 'remote'
})

and model and store are defined with:

Ext.define('loginTypeModel', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'valueField' },
        {
            name: 'localizedDisplayField',
            convert: function(value, record) {
                return window._i18n['login.login-panel.logintypename.' + record.get('valueField')];
            }
        }
    ],
    proxy: {
        type: 'ajax',
        url: 'Admin/LoginTypes',
        reader: {
            type: 'json'
        }
    }
});

var loginTypesStore = Ext.create('Ext.data.Store', {
    autoLoad: false,
    type: 'json',
    model: 'loginTypeModel'
});

I added load listener for store which should set combobox value to the first item received:

loginTypesStore.on('load', function () {
    var combo = Ext.getCmp('login-panel').getComponent('logintype');
    console.log('combo.Value : [' + combo.getValue() + '] -> [' + loginTypesStore.data.first().data.valueField + ']');
    combo.setValue(loginTypesStore.data.first().data.valueField); //loginTypesStore.data.first().data.valueField);
    console.log('combo.Value = ' +  combo.getValue());    
});

However, in console output I can see this:

combo.Value : [null] -> [activeDirectory]
combo.Value = Active Directory EN

"Active Directory EN" is English translation for "activeDirectory" key.

How is that possible?

When I replace store with local one like this:

var loginTypesStore = Ext.create('Ext.data.Store', {
    fields: ['valueField', 'localizedDisplayField'],
    data: [
        {"valueField": "userpass", "localizedDisplayField": "Localized userpass"},
        {"valueField": "activeDirectory", "localizedDisplayField": "Localized activeDirectory"}
    ]
});

everything is working fine, i.e. in console I see:

combo.Value : [null] -> [userpass]
combo.Value = userpass

Answer 1

The problem was in reading translation file. Translation Active directory EN did actually have invisible \r character at the end, and problem was in function getValue. From image below, you can see that variable d equals to Active Directory EN but it has appended \r, while b.getDisplayValue() does not have it (I debugged and this value is retreived from DOM so maybe that \r is lost there).