ExtJs mimics TAB when you press ENTER

Question

I know this is not the smartest idea, but I still need to do this. Our users want to use ENTER as a TAB. So, the best I came up with is:

Ext.override(Ext.form.field.Base, { initComponent: function() { this.callParent(arguments); this.on('afterrender', function() { var me=this; this.getEl().on('keypress',function (e){ if(e.getKey() == 13) { me.nextNode().focus(); } }); }); } }); 

But it still doesn't work exactly like TAB. I mean, it works fine with input fields, but not with other controls. Maybe there is a low-level solution. Any ideas?

Answer 1

In the past, I attached a listener to a document, something like this:

 Ext.getDoc().on('keypress', function(event, target) { // get the form field component var targetEl = Ext.get(target.id), fieldEl = targetEl.up('[class*=x-field]') || {}, field = Ext.getCmp(fieldEl.id); if ( // the ENTER key was pressed... event.ENTER == event.getKey() && // from a form field... field && // which has valid data. field.isValid() ) { // get the next form field var next = field.next('[isFormField]'); // focus the next field if it exists if (next) { event.stopEvent(); next.focus(); } } }); 

Answer 2

For Ext.form.field.Text and the like xtypes, there is an additional enableKeyEvents configuration that must be set before the / keydown / keyup keypress events fire. The enableKeyEvents config parameter must be set to true since it is false by default.

ExtJS API Addition

Answer 3

Disclaimer: I am not an expert in ExtJs.

Here, maybe try something like:

 if (e.getKey() === 13) { me.blur(); return false; // cancel key event to prevent the [Enter] behavior } 

Answer 4

You can try this

 if (e.getKey() === 13) { e.keyCode = Ext.EventObject.TAB this.fireEvent(e, {// any additional options }); } 

In fact, I have never tried this.