Sencha ExtJS Grid With textareafield not accepting new lines

Question

The RowEditor grid plugin captures the enter key as part of its processing, but I want my user to be able to edit the text in a "textarea" field. When they press "enter" to enter a newline the RowEditor thinks they want to perform an update.

A possible fix was suggested that look like the following:

listeners: {
afterrender: function() {
    this.inputEl.swallowEvent([
        'keypress',
        'keydown'
    ]);
}

}

When I try and use this code I get 'inputEl' is underfined. I have also tried:

var el = Ext.get("txtTest");
el.inputEl.swallowEvent([
        'keypress',
        'keydown'
    ]);

Yet I receive the same error. I am guessing the key lies with this swallowEvent after the textarea renders but I have no idea how to implement it.

Here is my code:

var newGrid = Ext.create('Ext.grid.Panel', {
            renderTo : Ext.getBody(),
            title    : 'Grid',
            width    : 1000,
            height   : 300,
            plugins  : [rowEditing],
            tbar: [{
                    text: 'New Entry',
                    iconCls: 'employee-add',
                    height: 40,
                    width: 115,
                    handler : function() { addNewRow(newGrid); }
                }],
            store    : store,
            columns: 
            {                       
                items: 
                [

                    { id: 'txtTest', itemId: 'txtTest', text: 'Activity', dataIndex: 'Activity', editor: 'textareafield', grow: true, growMax: 300, listeners: 
                        {
                            afterrender: function() 
                            {
                                alert(this.inputEl);

                                //this.inputEl.swallowEvent(['keypress','keydown']);
                            }
                        } 
                    }
                ]
            }
        });

Answer 1

Deriving your own textareafield from the default one will work:

Ext.define('EditorTextArea',{
    extend:'Ext.form.field.TextArea',
    xtype:'editortextarea',
    listeners:{
        afterrender:function(textareafield){
            textareafield.inputEl.swallowEvent(['keypress','keydown']);
        }
    }
})

and then editor:'editortextarea'.

Alternatively you can try:

editor: Ext.create('Ext.form.field.TextArea', {
    listeners: {
        afterrender: function(textareafield) {
            textareafield.inputEl.swallowEvent(['keypress', 'keydown']);
        }
    }
})