Ext 4 RowEditor editing cancels when first time click on ComboBox in currently edited row

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 ?

egerardus egerardus · Accepted Answer · 2012-08-21T23:07:12

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 e.g.:

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

Ext 4 RowEditor editing cancels when first time click on ComboBox in currently edited row

1 Answers