Results 1 to 5 of 5

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

  1. #1
    Sencha User
    Join Date
    Apr 2007
    Posts
    57
    Vote Rating
    0
      0  

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

    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

  2. #2
    Ext JS Premium Member
    Join Date
    Mar 2007
    Posts
    173
    Vote Rating
    0
      0  

    Default Text Field, Enter/Return key config

    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:

    HTML Code:
      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

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    3
      0  

    Default

    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.
    Code:
    		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');

  4. #4
    Ext JS Premium Member
    Join Date
    Mar 2007
    Posts
    173
    Vote Rating
    0
      0  

    Default Options

    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

  5. #5
    Ext User
    Join Date
    Aug 2007
    Posts
    1
    Vote Rating
    0
      0  

    Default how about keynav?

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •