extjs - Roweditor not working

Question

I have a gridPanel defined as follows:

Ext.define('Mb.view.winbiz.ExportGrid', {
    extend: 'Ext.grid.Panel',
    store: 'winbiz.Exports',
    plugins: [{ptype: 'rowediting', clicksToMoveEditor: 2, autoCancel: false}],
    columns: [
        {text: 'Id',  dataIndex: 'id'},
        {
            text: 'Description', 
            dataIndex: 'description', 
            flex:1,
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        }
    ]
});

I have this problem with the rowEditing plugin:
Instead of editing the line on which I double-click, a new row is inserted at the top of the grid, but it does not show the editor fields.

I looked everywhere in the code and compared to a working example based on the doc, but I cannot find what is not correct.

This is how it looks like:

Answer 1

The reason the rowEditor did not work was the following:

I have a custom template. The css needed for the rowEditiong plugin to work was not included.

Once I rebuilt the application with sencha app build the css file was updated and everything worked fine.

Answer 2

Try this:

...
    {
        text: 'Description', 
        dataIndex: 'description', 
        flex:1,
        editor: { 
            xtype: 'textfield',
            allowBlank: true // (or false)
        }               
    }
....