第一次单击当前编辑行中的ComboBox时，Ext 4 RowEditor编辑将取消

Question

I have an Ext.grid.Panel with RowEditor plugin, and it contains a column with a combobox editor:

    {
        dataIndex: 'parentId',
        text: 'Parent category',
        editor: {
            store: store,
            valueField: 'categoryId',
            displayField: 'name',
            xtype: 'combobox',
            allowBlank: true
   }

The store looks like this:

var store = Ext.create('Ext.data.Store', {
    model: 'Category',
    autoLoad: true,
    proxy: {
        type: 'rest',
        url: 'api/categories',
        reader: {
            type: 'json',
            root: 'categories'
        }
    }
});

And model:

Ext.define('Neopod.model.Category', {
    extend: 'Ext.data.Model',
    fields: ['categoryId', 'name', 'parentId'],
})

When editing a grid row and clicking on combobox for the first time, then ExtJS triggers data load from the server and the roweditor cancels automatically. So user expected to see combo dropdown, but combo not opened and instead the edit mode cancels.

So why does ExtJS behave this way ?

Answer 1

A simple handling is to configure your combobox with: queryMode: 'local' so that it doesn't try to reload whenever it is expanded.

Using your example:

{
    dataIndex: 'parentId',
    text: 'Parent category',
    editor: {
        store: store,
        valueField: 'categoryId',
        displayField: 'name',
        xtype: 'combobox',
        allowBlank: true,
        queryMode: 'local'
   }
}

You can also try configuring your RowEditing plugin with autoCancel: false eg:

Ext.create('Ext.grid.plugin.RowEditing', {
    pluginId: 'rowediting',
    clicksToEdit: 2,
    autoCancel: false
});