PDA

View Full Version : Submit form on enter?



alejandroNNU
4 Nov 2013, 8:14 AM
I have a simple form panel with username/password text fields and a submit button that will log in the user based on the text fields' info, my question is, how can I make it so that a user can log in simply by pressing enter after placing his info instead of having to press the button? The button will still be there of course, I just want them to have the option to log in quicker by pressing enter. I know that in html you simply set the form input type to "submit", how can I do that here?

blomasky
4 Nov 2013, 9:07 AM
There are a few ways to handle this, but assuming you have a controller that is handling all of your events for your login window, the steps are:

1) Listen to the SpecialKey event. Assuming your username and password are both text fields, you want to set up a handler to listen to this event. In architect, you can set up an action with the following:
controlQuery: #login textfield (assuming your form has an itemID of login)
targetType Ext.form.field.Text (this will listen to any keyboard input in all form text fields.
once you name your function, the following code will run the "click" event on your OK button:

if (e.getKey() == e.ENTER){
var okBtn = this.getOk();
okBtn.fireEvent('click', okBtn, e, eOpts);
}


good luck

Bruce

alejandroNNU
4 Nov 2013, 12:02 PM
worked great, thank you, the only thing is when making my button variable, i used:


var button = field.nextSibling('#loginButton');

is
var button = this.getLoginButton() supposed to work? can you use this.get"name of a component" to find any component in the app? or how does that work?

blomasky
4 Nov 2013, 12:11 PM
in your controller, you can create a REF to a variable, where you "name" the componentQuery. For example, if you have a button with the itemID (which is diff. from the ID) named foo, you can always type ComponentQuery.query('#foo')[0] to get a reference to the item, OR, you can add this once in the controller, so you will have a ref called fooButton and then can always type this.getFooButton(). There are a few advantages of this, including caching...

alejandroNNU
4 Nov 2013, 12:23 PM
oooh ok, yes i see, i got it, thank you.