Question

I’ve got an issue when using an extjs combo box (regardless of browser, tested in Chrome and FF with same result).

The combo box loads just fine, both entries are displayed. I can select one of the two that are loaded initially, but if I try and change the selection after I’ve already selected, it keeps the original value and no select or change event is fired. I found that if I start typing in the non-selected entry, auto complete takes over, and I can hit the return key to select the entry and a select event and change event are fired. Why can I not just simply click on the unselected entry to select it?

Here’s the model, reader, data store, and combo box code:

//Model
Ext.define('cbMonitorModel', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'iMonitorID', type: 'String'},
        {name: 'sMonitorName', type: 'String'}
    ]
});

//Reader
var cbMonitorReader = Ext.create('Ext.data.JsonReader',{
    type: 'json',
    model: 'cbMonitorModel'
});

//Store
var cbMonitorDataStore = Ext.create('Ext.data.Store',{
fields: ['iMonitorId','sMonitorName'],
autoLoad: true,
proxy: {
    type: 'ajax',
    url: '/inc/ajax/Monitors.php',
    actionMethods: 'POST',
    reader: cbMonitorReader,
    extraParams: {
        task: 'getMonitors',
        domain: sMonitorDomainName
    }
}
});

//ComboBox
Ext.create('Ext.form.ComboBox',{
    fieldLabel: 'Monitor',
    store: cbMonitorDataStore,
    queryMode: 'local',
    displayField: 'sMonitorName',
    valueField: 'iMonitorId',
    renderTo: Ext.get('monitorSelect'),
    width: 400,
    listeners: {
        select: function(combo, records, opts) {
            console.log('MonitorComboBox - Select');
            console.log(combo);
            console.log(records);
            console.log(opts);
            console.log(cbMonitorDataStore);
            console.log('--------------------------------------------------------------------');
        }
    }
});

The proxy returns the following string:

[{"iMonitorID":"85","sMonitorName":"6176 - xxx.xxx.xxx.xxx default monitor"},{"iMonitorID":"86","sMonitorName":"14177 - aaa.bbbbbbbbb.com default monitor"}]

Thanks. Any help would be appreciated.

---

Edit: 2011-09-08 16:32 CST

I still haven’t figured this problem out, but in the meantime, I’ve found a “dirty” work around… expand event clears out the previous value, which allows the user to select a different value, but then the problem was that I couldn’t use “getValue()”… hence the cb.lastSelection[0].raw.iMonitorID string…

ComboBox code:

var MonitorCB = Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Monitor',
    store: cbMonitorDataStore,
    queryMode: 'local',
    displayField: 'sMonitorName',
    valueField: 'iMonitorName',
    width: 400,
    renderTo: 'monitorSelect',
    listeners: {
        select: function(cb, rec, opts){
            console.log(cb.lastSelection[0].raw.iMonitorID);
        },
        expand: function(){this.clearValue()}
    }
});

Answer 1

You have mistake in your code. In combobox config valueField: 'iMonitorId' is specified with small letter d whereas in model config name: 'iMonitorID' is specified with large one (and the proxy returns 'iMonitorID's).

By the way. You are using both reader with model and store’s fields config. The correct model’s fields config is not used because store already have the wrong fields config.

So the solution would be:

1. get rid of fields: ['iMonitorId','sMonitorName'], in store’s config.
2. change valueField to 'iMonitorID' in combobox’ config.