View Full Version : DefaultButton plugin - submit on ENTER

8 Dec 2009, 5:24 PM
My form should auto-submit when ENTER is pressed.
I have found a couple of related posts in the forums, but I either don't understand them or they seem to have limitations like not working for buttons in toolbars or only working with regular form submit (instead of AJAX).

So I came up with my own solution as a plugin.

Usage: Simply add the plugin to the button which should be triggered

text: 'Save',
xtype: 'button',
plugins: 'defaultButton',
handler: yourRegularHandler
}The button component has to be nested in a form for this to work
(but it works even if the HTML button is not nested in the HTML form, like when the ExtJS button component is in the footer of a FormPanel).



var ns = Ext.ns('Ext.ux.plugins');
* @class Ext.ux.plugins.DefaultButton
* @extends Object
* Plugin for Button that will click() the button if the user presses ENTER while
* a component in the button's form has focus.
* @author Stephen Friedrich
* @date 21-JAN-2010
* @version 0.2
Ext.ux.plugins.DefaultButton = Ext.extend(Object, {
init: function(button) {
button.on('afterRender', setupKeyListener, button);

function setupKeyListener() {
var formPanel = this.findParentByType('form');
//noinspection ObjectAllocationIgnored
new Ext.KeyMap(formPanel.el, {
key: Ext.EventObject.ENTER,
shift: false,
alt: false,
fn: function(keyCode, e){
if(this.hidden || e.target.type === 'textarea' && !e.ctrlKey) {
return true;

return false;
scope: this

Ext.ComponentMgr.registerPlugin('defaultButton', ns.DefaultButton);

})();I coded some explicit handling for textarea, so that pressing "Enter" while a textarea is focused still works (inserts a line break in the textarea), but ctrl-enter triggers the button.

Any feedback (be kind - this is my first, little plugin)?

Tested on FF 2, FF 3.5, IE 6, IE 8

Steffen Hiller
8 Dec 2009, 6:29 PM
Didn't test it, but looks like a neat little and well done plugin to me! :-)


21 Dec 2009, 12:18 AM
very useful plugin.

21 Jan 2010, 8:38 AM
I updated the code in the first post.
There was a tiny bug: Hidden buttons were click()ed on.

I had a form where either a SplitButton or a Button is hidden and the other one should be triggered. Now that works correctly by adding the plugin to both buttons.

21 Apr 2010, 3:37 PM
THANKS, i was looking for this kind of solution.

27 Apr 2010, 11:12 PM
very useful,i will use it in my programme