Sencha ExtJS Grid With textareafield not accepting new lines - extjs

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']);
}
}
})