In ExtJS 7.7 grid classic toolkit, when using cellediting plugin, I am unable to show the combobox option

Question

In ExtJS 7.7 grid classic toolkit, when using cellediting plugin, I am unable to show the combobox option. This happens in the ExtJS Kitchensink examples itself. Most probably this is a bug. Doesn't have any problem in ExtJS 7.6

Ext.define('KitchenSink.view.grid.CellEditing', {
    extend: 'Ext.grid.Panel',
    xtype: 'cell-editing',
    controller: 'cell-editing',

    requires: [
        'Ext.selection.CellModel'
    ],

    title: 'Cell Editing Plants',
    width: 680,
    height: 350,

    autoLoad: true,
    frame: true,
    selModel: {
        type: 'cellmodel'
    },

  

    plugins: {
        cellediting: {
            clicksToEdit: 1
        }
    },

    store: {
        model: 'KitchenSink.model.Plant',

        proxy: {
            type: 'ajax',
            url: 'data/grid/plants.xml',

            reader: {
                type: 'xml',    // XmlReader since returned data is in XML
                record: 'plant' // records are in 'plant' tags
            }
        },

        sorters: [{
            property: 'common',
            direction: 'ASC'
        }]
    },

    columns: [{
        header: 'Common Name',
        dataIndex: 'common',

        flex: 1,
        editor: {
            allowBlank: false,
            selectOnFocus: false
        }
    }, {
        header: 'Light',
        dataIndex: 'light',

        width: 130,
        editor: {
            xtype: 'combo',
            typeAhead: true,
            triggerAction: 'all',
            selectOnFocus: false,
            store: [
                ['Shade', 'Shade'],
                ['Mostly Shady', 'Mostly Shady'],
                ['Sun or Shade', 'Sun or Shade'],
                ['Mostly Sunny', 'Mostly Sunny'],
                ['Sunny', 'Sunny']
            ]
        }
    }, {
        header: 'Price',
        dataIndex: 'price',

        width: 70,
        align: 'right',
        formatter: 'usMoney',
        editor: {
            xtype: 'numberfield',
            selectOnFocus: false,
            allowBlank: false,
            minValue: 0,
            maxValue: 100000
        }
    }, {
        xtype: 'datecolumn',
        header: 'Available',
        dataIndex: 'availDate',

        width: 95,
        format: 'M d, Y',
        editor: {
            xtype: 'datefield',
            selectOnFocus: false,
            format: 'm/d/y',
            minValue: '01/01/06',
            disabledDays: [0, 6],
            disabledDaysText: 'Plants are not available on the weekends'
        }


    }]
});

when you click and in editing mode, you can't click the dropdown trigger to show the options, both in combobox and in datefield

It must probably a bug. Please give a workaround. Or if you know the newer version has this bug fixed?

Answer 1

Use this override:

Ext.define('CellEditingPluginOverride', {
    override: "Ext.view.Table",
    focusPosition: function() {
        Ext.emptyFn();
    },
});

Answer 2

I can confirm that the example in KitchenSink is not working. They also mentioned in the Release Notes that there are some changes in cell editing but not sure exactly what it was.

I was able to make it work in version 7.7 by using valueField. I also have to convert the records for the combobox as a list of objects instead of a matrix.

// ...
        header: 'Light',
        dataIndex: 'light',
    
        width: 130,
        editor: {
            xtype: 'combo',
            typeAhead: true,
            triggerAction: 'all',
            selectOnFocus: false,
            valueField: 'value',
            displayField: 'text',
            store: [
                {text: 'Shade', value: 'Shade'},
                {text: 'Mostly Shady', value: 'Mostly Shady'},
                {text: 'Sun or Shade', value: 'Sun or Shade'},
                {text: 'Mostly Sunny', value: 'Mostly Sunny'},
                {text: 'Sunny', value: 'Sunny'}
            ]
        }
    }, {
// ...