ExtJS 4.1: How to allow ENTER key to be pressed in TextArea EditorGrid?

[twist3r]

hello,

I've defined an EditorGrid in ExtJS 4.1-RC1 and one of the columns has a TextArea as editor.

When pressing the ENTER key to enter e newline in the textarea the grid intercepts the event and fires the completeEdit() event, closing the editor and commiting the changes.

How can I avoid this behavior and allow newlines to be entered?

This is the column definition:

{
      dataIndex: 'note',
      text: 'Note',
      width: 120,
      sortable: false,
      filterable: true,
      editor: {
        xtype: 'textarea',
        allowBlank: true,
        grow: true,
        completeOnEnter: false,
      },
    }

note that the "completeOnEnter" option seems to have no effect

Thanks for any reply.

[mitchellsimoens]

This for cell or row editing?

[twist3r]

This for cell or row editing?

RowEditing

[MrNicholas]

twist3r,

I was having this exact same issue and came across your post. After about two hours of digging thru the various sources, I finally came up with a solution (though it may not be optimal).

The "submit on enter" functionality is setup in the afterRender event of Ext.grid.RowEditor. I created a simple override to remove it:

Ext.override(Ext.grid.RowEditor, {
   afterRender: function() {
        var me = this,
            plugin = me.editingPlugin;

        me.callParent(arguments);
        me.mon(me.renderTo, 'scroll', me.onCtScroll, me, { buffer: 100 });

        // Prevent from bubbling click events to the grid view
        me.mon(me.el, {
            click: Ext.emptyFn,
            stopPropagation: true
        });

        me.el.swallowEvent([
            'keypress',
            'keydown'
        ]);

        me.keyNav = Ext.create('Ext.util.KeyNav', me.el, {
            esc: plugin.onEscKey,
            scope: plugin
        });

        me.mon(plugin.view, {
            beforerefresh: me.onBeforeViewRefresh,
            refresh: me.onViewRefresh,
            scope: me
        });
    }
});

In the keyNav setup block, it used to have the following:

enter: plugin.completeEdit,

which is the thing I removed. This is for 4.0.6, btw, not 4.1 but since no one had responded to you, I thought I'd share.

Enjoy!

[ruslan.talpa]

This seems to work for me

{
    xtype: 'gridcolumn',    
    dataIndex: 'description',   
    editor: { 
        xtype: 'textareafield',
        listeners: { 
            afterrender: function(){
                var me = this;
                 me.el.swallowEvent(['keypress','keydown'    ]); 
            }
        }
    }
}