DefaultButton plugin - submit on ENTER

[stephen.friedrich]

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).

Code:


(function(){

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;
}

this.el.select('button').item(0).dom.click();
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]

Didn't test it, but looks like a neat little and well done plugin to me! :-)
Congrats!

Steffen

[JasmineWaters]

very useful plugin.
Thanks!

[stephen.friedrich]

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.

[tombal93]

THANKS, i was looking for this kind of solution.
GREAT !

[lj2008]

very useful,i will use it in my programme