1. #1
    Sencha Premium Member
    Join Date
    Sep 2013
    Posts
    99
    Vote Rating
    4
    alejandroNNU is on a distinguished road

      0  

    Default Submit form on enter?

    Submit form on enter?


    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?

  2. #2
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Connecticut
    Posts
    543
    Vote Rating
    36
    blomasky has a spectacular aura about blomasky has a spectacular aura about

      0  

    Default Listening for ENTER key

    Listening for ENTER key


    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

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2013
    Posts
    99
    Vote Rating
    4
    alejandroNNU is on a distinguished road

      0  

    Default


    worked great, thank you, the only thing is when making my button variable, i used:

    Code:
    var button = field.nextSibling('#loginButton');
    is
    Code:
    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?

  4. #4
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Connecticut
    Posts
    543
    Vote Rating
    36
    blomasky has a spectacular aura about blomasky has a spectacular aura about

      0  

    Default


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

  5. #5
    Sencha Premium Member
    Join Date
    Sep 2013
    Posts
    99
    Vote Rating
    4
    alejandroNNU is on a distinguished road

      0  

    Default


    oooh ok, yes i see, i got it, thank you.

Thread Participants: 1