ExtJS 4 - ComboBox Issue

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()}
    }
});

well the component seems pretty well defined.. As i see it the problem could be caused by the renderTo config... In the Api they specify Do not use this option if the Component is to be a child item of a Container. It is the responsibility of the Container's layout manager to render and manage its child items. So basicly what i understand that the component doesn;t managet the render itself, that it;s left to the conainer. Why not add the component to the container using the items config, and ditch the config renderTo. — nscrob
Thanks nscrob, I originally had this combo box nested in a panel that was then rendered to the same place as the combo box is now, same problem happened there too. I think it has something to do with the data store, because if I don't use a proxy but hardcode in the "fields" and "data" (not realistic but was curious) it works just fine. — SerEnder
Now that i think about it i had the same problem with a checkbox column model for a grid, i discovered that the problem was that the store was used somewhere else, the fact is that in extjs4 the store it's much closer bind to the component, and any modification to a record needs a commit to render the components using it.. If you are using the store somewhere else this could be the problem ... — nscrob
I'm developing this on a stand alone page, as I thought that might also be the problem (it's happened before and I'm sure it'll happen again), so there's no variable conflict. No other components touch cbMonitorDataStore. Check out my dirty workaround that I added up top. Thanks again for taking a look though. — SerEnder

Molecular Man Molecular Man · Accepted Answer · 2011-09-09T07:12:26

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.

ExtJS 4 - ComboBox Issue

1 Answers