Focus on button when "enter" is pressed after writing in a text box

[ksachdeva]

I have a small LayoutDialog in which I have put the Ext.form.TextField (please note that there is no form, I am just using the form.TextField library class). I also have an "OK" button added to my LayoutDialog. What I would like to do is if some one enters the value in the text box and press "enter/return" then the "OK" button should be clicked.

Would appreciate if someone could point out if I could achieve this by just using some config option.

Side question : Is it okay to use Ext.form.TextField anywhere ?, is it meant to be used only in form ?

Regards & thanks
Kapil

[MaxT]

Unfortunately I don't think there is a config option for this, although it would be nice to have one.

One way is to add an event handler to each Text Field.

Code might be something like this to detect the Return and Enter keys:

  var myTextField = new Ext.form.TextField( ...etc... );

  myTextField.on("specialkey", specialKey, this);

  function specialKey( field, e ) {
    if ( e.getKey() == e.RETURN || e.getKey() == e.ENTER ) {
	//...code to submit form goes here
       // be careful of scope if calling your button click handler...
    }
  }

Max

[tryanDLS]

You can add listeners to the the field objects via config.
This hasn't made it into the doc yet, but here's a sample. There are several supported ways of declaring the handlers in the listeners object - see this thread.

		var userName = new Ext.form.TextField({
			id:'userName',
			minLength:3, maxLength:20,
			allowBlank:false, blankText:'A user name is required', vtype:'alphanum',
			listeners:{
				'valid':this.onFieldValid,
				'invalid':this.onFieldInvalid,
				scope:this
			}
		});
		userName.applyTo('userName');

[MaxT]

It would still be nice to have some of the "standard" field options built in as configuration parameters rather than have to add your own handlers.

E.g.

Enter key -> go to next field.
Enter key -> submit form

etc

Max

[lin_xd]

var nav = new Ext.KeyNav("my-element", {
"left" : function(e){
this.moveLeft(e.ctrlKey);
},
"right" : function(e){
this.moveRight(e.ctrlKey);
},
"enter" : function(e){
this.save();
},
scope : this
});

[jack]

That helped me!
Thanks a lot.