ExtJS Combo默认值返回null

Question

I have set up an ComboBox in my application. Combo has emptyText and default value that I have set.

I wish to keep '7AM' text and '7' as a default value. but when I try to submit page by selecting '7AM', then null value is returned.

// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
    fields : [
        'id',
        'text'
    ],
    data: [
        {
            'id':'3',
            'text':'3AM'
        },
        {
            'id':'4',
            'text':'4AM'
        },
        {
            'id':'5',
            'text':'5AM'
        },
        {
            'id':'6',
            'text':'6AM'
        },
        {
            'id':'7',
            'text':'7AM'
        }
    ]
});

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State',
    store: states,
    queryMode: 'local',
    displayField: 'text',
    valueField: 'id',
    emptyText: '7AM',
    value: '7',
    renderTo: Ext.getBody(),
    listeners: {
        'select': function(cbo){
            alert(cbo.getValue());
        }
    }
});

Above is the test code, can you advise why null is alerted when I select 7AM ?

Answer 1

// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
    fields : ['id', 'text'],
    data: [{'id':'3','text':'3AM'}, {'id':'4','text':'4AM'}, {'id':'5','text':'5AM'},{'id':'6','text':'6AM'},{'id':'7','text':'7AM'}]
});

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State',
    store: states,
    itemId: 'combo',
    queryMode: 'local',
    displayField: 'text',
    valueField: 'id',
    //emptyText: '7AM',
    //value: '7',
    renderTo: Ext.getBody(),
    listeners: {
        'select': function(cbo){
            alert(cbo.getValue());
        },
        'afterrender': function(cbo) {
            cbo.setValue("7");
        }
    }
});

Answer 2

Your example seems to be OK. So your issue must be somewhere else, not in the combo itself.

1- Check if there is no error in the console in your application.

2- Check if the store is loaded when you check for it's value.

3- Check if there is no event changing the combo value after it is rendered.