Blank value in Grid with combobox when force select is true

Question

I got a combocox in editor grid. When entering values I have to validate so I used property forceSelection : true . But turning on force selection raise another problem as the combo value is blank when the combo box loss focus as below attached image.

Sample code:

var employeeType = [{
    'typeid': 1,
    'typename': 'Contractor'
}, {
    'typeid': 1,
    'typename': 'Regular'
}];

var employeeTypeStore = Ext.create('Ext.data.Store', {
    fields: ['typeid', 'typename'],
    data: employeeType
});

Ext.define('Employees', {
    extend: 'Ext.data.Model',
    fields: [{
            name: 'emptype',
            type: 'string'
        }, {
            name: 'name',
            type: 'string'
        },

    ]
});

var empStore = Ext.create('Ext.data.Store', {
    model: 'Employees',
    data: [{
        'emptype': 'Regular',
        'name': 'John Doe'
    },{
        'emptype': 'Regular',
        'name': 'Ricky'
    },{
        'emptype': 'Regular',
        'name': 'Mason'
    }]
});

var grid = Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    store: empStore,
    width: 1000,
    height: 500,
    title: 'Employees',
    columns: [{
        text: 'Employee Type',
        dataIndex: 'emptype',
        editor: {
            xtype: 'combobox',
            queryMode: 'local',
            store: employeeTypeStore,
            displayField: 'typename',
            valueField: 'typeid',
            forceSelection : true
        }
    }, {
        text: 'Employee Name',
        dataIndex: 'name'

    }],
    plugins: {
        ptype: 'cellediting',
        clicksToEdit: 1

    }

});

If the value is false then I need to show the last correct value.

Once a valid selection is made, there is no way it can get deselected. Am I missing something? So the issue occurs only on first show of the editor when the cell value is empty. If so, why not just select a record in expand? Or set a value in the edit event handler. — ground_call

Super Man Super Man · Accepted Answer · 2019-07-11T06:26:49

Its the Expected behavior.

Setting forceSelection: true will restrict the user to select the value which is present in the list only. So if you loose the focus without selecting any item it will gonna blank.

You can use typeAhead: true to populate and autoselect the remainder of the text being typed if it matches a known value.

Blank value in Grid with combobox when force select is true

1 Answers