PDA

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



twist3r
16 Mar 2012, 1:26 AM
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
16 Mar 2012, 11:43 AM
This for cell or row editing?

twist3r
17 Mar 2012, 9:45 AM
This for cell or row editing?
RowEditing

MrNicholas
26 Jul 2012, 9:13 AM
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
17 Aug 2012, 12:38 AM
This seems to work for me


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