1. #1
    Sencha User
    Join Date
    Oct 2007
    Posts
    27
    Vote Rating
    0
    philance is on a distinguished road

      0  

    Default Form submit on Enter

    Form submit on Enter


    Bros,

    In Extjs 4, the Enter key to submit form that used to work in extjs 3 is no longer working.

    Code:
    keys: [{ key: Ext.EventObject.ENTER, fn: onSubmit }],
    I read through the API documentation and try to google but cannot find the solution. Please help.

  2. #2
    Touch Premium Member
    Join Date
    Jun 2008
    Posts
    64
    Vote Rating
    0
    bhutten is on a distinguished road

      0  

    Default


    I couldn't get the "keys" config to work in Ex4 either. This works, though - in "afterRender" :

    Code:
        this.keyNav = Ext.create('Ext.util.KeyNav', this.el, {
          enter: this.onSubmitButton,
          scope: this
        });

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    60
    Vote Rating
    3
    rrandymeyer is on a distinguished road

      0  

    Default


    Was there a solution for capturing the Enter key? I am trying to implement this in the login example where I would like the enter key to submit the form. Is the "afterRender" event on the form?

    Thank you.

  4. #4
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    60
    Vote Rating
    3
    rrandymeyer is on a distinguished road

      1  

    Default


    I implemented it this way according to another post. For each field I added a listener:

    Code:
                listeners: {
                    specialkey: function(field, e){
                        if (e.getKey() == e.ENTER) {
                            submitLogin();
                        }
                    }
                },
    The submitLogin() call is the same one the login button calls.

  5. #5
    Sencha User
    Join Date
    May 2011
    Posts
    1
    Vote Rating
    3
    pauk960 is on a distinguished road

      3  

    Default MVC way

    MVC way


    Or, if you use MVC architecture in your application you can add this code to your controller

    PHP Code:
    init: function() {
        
            
    this.control({
            
    'textfield': {
            
    specialkey: function(fielde) {
                if(
    e.getKey() == e.ENTER) {
                            
    field.up('form').getForm().submit();
                }
            }
            }
            });


  6. #6
    Sencha Premium Member
    Join Date
    Aug 2010
    Location
    Las Vegas, NV
    Posts
    6
    Vote Rating
    0
    Tim Dudek is on a distinguished road

      0  

    Default


    listeners: {
    specialkey: function(field, e){
    if (e.getKey() == e.ENTER) {
    submitLogin();
    }
    }
    },

    This worked for me. Thanks

  7. #7
    Sencha User
    Join Date
    Jul 2011
    Posts
    95
    Vote Rating
    2
    TiloS is on a distinguished road

      2  

    Default


    In each field - isn't it horrible?

    This works with the form and fnLogin as login function:
    Code:
    listeners: {
                afterRender: function(thisForm, options){
                    this.keyNav = Ext.create('Ext.util.KeyNav', this.el, {
                        enter: fnLogin,
                        scope: this
                    });
                }
    }

  8. #8
    Sencha Premium Member dpaquin's Avatar
    Join Date
    Jul 2011
    Location
    Vancouver, Canada
    Posts
    31
    Vote Rating
    0
    dpaquin is on a distinguished road

      0  

    Default


    I use the defaults property of the form to apply that single listener to all the fields (without having to write it out each time)

  9. #9
    Sencha User
    Join Date
    Nov 2010
    Posts
    8
    Vote Rating
    2
    osnoek is on a distinguished road

      1  

    Default


    Quote Originally Posted by TiloS View Post
    PHP Code:
    listeners: {
        
    afterRender: function(thisFormoptions){
            
    this.keyNav Ext.create('Ext.util.KeyNav'this.el, {                    
                
    enterfnLogin,
                
    scopethis
            
    });
        }

    Excellent! this works like a charm. Much nicer than handling it on a per-field basis

  10. #10
    Sencha User
    Join Date
    Jun 2012
    Posts
    81
    Vote Rating
    0
    mohaskuar is on a distinguished road

      0  

    Default


    i think this is the best way ...i having a problem on my submitLogin(); function be cause my login function accepts a button as an angument
    submitLogin(button);........so how can i pass any button?on a key press

Similar Threads

  1. Form submit on Enter
    By egorfine in forum Ext: Discussion
    Replies: 3
    Last Post: 13 Apr 2011, 11:02 AM
  2. Submit Form with Enter
    By drieraf in forum Ext 2.x: Help & Discussion
    Replies: 14
    Last Post: 28 Apr 2010, 4:19 AM
  3. How to submit a form using the enter key?could anybody please help
    By misra123 in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 2 Sep 2008, 1:10 AM
  4. i want Enter key submit my form
    By mnask in forum Ext 2.x: Help & Discussion
    Replies: 10
    Last Post: 3 Jul 2008, 1:03 AM
  5. Form without submit button, handling submit with shift+enter...
    By violinista in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 5 Jun 2007, 12:02 AM

Thread Participants: 9