1. #1
    Sencha User
    Join Date
    Feb 2008
    Posts
    10
    Vote Rating
    0
    drieraf is on a distinguished road

      0  

    Default Submit Form with Enter

    Submit Form with Enter


    Hi, I have this login form

    How I can simulate a "Validar" click on ??? (keys part) to submit the form when enter is pressed ?

    [CODE]
    Ext.onReady(function(){
    Ext.QuickTips.init();

    // Create a variable to hold our EXT Form Panel.
    // Assign various config options as seen.
    var login = new Ext.form.FormPanel({
    labelWidth:80,
    url:'?m=login',
    frame:true,
    title:'Acceso a la Intranet de EMSER',
    defaultType:'textfield',
    monitorValid:true,
    keys{
    key: Ext.EventObject.ENTER ,
    fn: ???,
    scope: this
    }),
    // Specific attributes for the text fields for username / password.
    // The "name" attribute defines the name of variables sent to the server.
    items:[{
    fieldLabel:'Usuario',
    name:'loginUsuario',
    id:'loginUsuario',
    allowBlank:false
    },{
    fieldLabel:'Clave',
    name:'loginClave',
    inputType:'password',
    allowBlank:false
    }],

    // All the magic happens after the user clicks the button
    buttons:[{
    text:'Validar',
    id:'go',
    type:'submit',
    formBind: true,
    // Function that fires when user clicks the button
    handler:function(){
    login.getForm().submit({
    method:'POST',
    waitTitle:'Conectando',
    waitMsg:'Enviando los datos ...',

    // Functions that fire (success or failure) when the server responds.
    // The one that executes is determined by the
    // response that comes from login.asp as seen below. The server would
    // actually respond with valid JSON,
    // something like: response.write "{ success: true}" or
    // response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}"
    // depending on the logic contained within your server script.
    // If a success occurs, the user is notified with an alert messagebox,
    // and when they click "OK", they are redirected to whatever page
    // you define as redirect.

    success:function(){
    var redirect = '?m=inicio';
    window.location = redirect;
    },

    // Failure function, see comment above re: success and failure.
    // You can see here, if login fails, it throws a messagebox
    // at the user telling him / her as much.

    failure:function(form, action){
    if(action.failureType == 'server'){
    obj = Ext.util.JSON.decode(action.response.responseText);
    Ext.Msg.alert('Ha fallado la validaci

  2. #2
    Sencha User dlbjr's Avatar
    Join Date
    Oct 2007
    Location
    Cache, OK USA
    Posts
    281
    Vote Rating
    3
    dlbjr is on a distinguished road

      0  

    Default This should be close

    This should be close


    Add to your form config:

    Code:
    keys: [{key : [10,13],fn: function(){
              var bt = Ext.get('go'); 
              bt.focus();
              bt.fireEvent("click", bt);
         }
    }] 
    
    dlbjr - David L. Bryant Jr.

    Owner of
    dlbjr Technology Consulting
    Web2 System Developer & Consultant
    Focused on C.I. - Six Sigma - Shingo - Lean Technologies
    dlbjr.consulting@gmail.com

    Owner of:
    Attractive Graphics - "custom screen printing"
    attractivegraphicscsp@gmail.com

  3. #3
    Sencha User
    Join Date
    Feb 2008
    Posts
    10
    Vote Rating
    0
    drieraf is on a distinguished road

      0  

    Default


    Just now I tried your code and

    - In Safari I got: "Value undefined (result of expression bt.fireEvent) is not object."
    - In Firefox : "Error: bt.fireEvent is not a function"

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    You could use a SubmitButton (example).

  5. #5
    Sencha User
    Join Date
    Feb 2008
    Posts
    10
    Vote Rating
    0
    drieraf is on a distinguished road

      0  

    Default


    I tried this code but is do nothing.

    Really I like more the "keys" situation, because I want to configure the ESCape key to close a window and warn if some data is changed. But this is more secundary, the most problematic for my users now is send the form pressing the Enter key.

    [CODE]
    // Ext.SubmitButton borrowed from Animal
    Ext.SubmitButton = Ext.extend(Ext.Button, {
    template: new Ext.Template(
    '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
    '<td class="x-btn-left"><i>&amp;#160;</i></td><td class="x-btn-center"><input type="submit" class="x-btn-text" name="{1}" value="{0}></td><td class="x-btn-right"><i>&amp;#160;</i></td>',
    "</tr></tbody></table>"),
    onRender: function(ct, position){
    var btn, targs = [this.text || ' ', this.name];
    if(position){
    btn = this.template.insertBefore(position, targs, true);
    }else{
    btn = this.template.append(ct, targs, true);
    }
    var btnEl = btn.child("input:first");
    btnEl.on('focus', this.onFocus, this);
    btnEl.on('blur', this.onBlur, this);
    this.initButtonEl(btn, btnEl);
    btn.un(this.clickEvent, this.onClick, this);
    Ext.ButtonToggleMgr.register(this);
    }
    });
    Ext.reg('submit', Ext.SubmitButton);


    Ext.onReady(function(){
    Ext.QuickTips.init();

    // Create a variable to hold our EXT Form Panel.
    // Assign various config options as seen.
    var login = new Ext.form.FormPanel({
    labelWidth:80,
    url:'?m=login',
    frame:true,
    title:'Acceso a la Intranet de EMSER',
    defaultType:'textfield',
    monitorValid:true,
    // Specific attributes for the text fields for username / password.
    // The "name" attribute defines the name of variables sent to the server.
    items:[{
    fieldLabel:'Usuario',
    name:'loginUsuario',
    id:'loginUsuario',
    allowBlank:false
    },{
    fieldLabel:'Clave',
    name:'loginClave',
    inputType:'password',
    allowBlank:false
    }],

    // All the magic happens after the user clicks the button
    buttons:[{
    text:'Validar',
    id:'go',
    type:'submit',
    xtype:'submit',
    formBind: true,
    // Function that fires when user clicks the button
    handler:function(){
    login.getForm().submit({
    method:'POST',
    waitTitle:'Conectando',
    waitMsg:'Enviando los datos ...',

    // Functions that fire (success or failure) when the server responds.
    // The one that executes is determined by the
    // response that comes from login.asp as seen below. The server would
    // actually respond with valid JSON,
    // something like: response.write "{ success: true}" or
    // response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}"
    // depending on the logic contained within your server script.
    // If a success occurs, the user is notified with an alert messagebox,
    // and when they click "OK", they are redirected to whatever page
    // you define as redirect.

    success:function(){
    var redirect = '?m=inicio';
    window.location = redirect;
    },

    // Failure function, see comment above re: success and failure.
    // You can see here, if login fails, it throws a messagebox
    // at the user telling him / her as much.

    failure:function(form, action){
    if(action.failureType == 'server'){
    obj = Ext.util.JSON.decode(action.response.responseText);
    Ext.Msg.alert('Ha fallado la validaci

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Unfortunately, buttons of a FormPanel are not inside the <form> tag.
    You'll have to set the FormPanel to layout:'fit' and include extra panel with layout:'form' that holds the fields and the buttons.

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Yes, I don't think the move to using a <form> for the body in the 2.2 release was enough.

    The <form> should be the main Element: http://extjs.com/forum/showthread.ph...612#post236612

  8. #8
    Ext User
    Join Date
    Nov 2008
    Posts
    56
    Vote Rating
    0
    dVyper is on a distinguished road

      0  

    Default


    If anyone else encounters this, I was able to get around this by adding this code to the Form:

    Code:
    keys: new Ext.KeyMap(document, {
          key: Ext.EventObject.ENTER,
          fn: function() {
                [form name].getForm().submit({url:'whatever.php'})
          },
          scope: this
    }),

  9. #9
    Sencha User
    Join Date
    Feb 2008
    Posts
    10
    Vote Rating
    0
    drieraf is on a distinguished road

      0  

    Default


    Thanks dVyper your solution was nice, but not like I answered. But you give me the idea to reach the goal!

    It's not elegant, but adding this code:

    Code:
    		keys: new Ext.KeyMap(document, {
    		      key: Ext.EventObject.ENTER,
    		      fn: function() {
    		      		login.buttons[0].focus();
    		      },
    		      scope: this
    		}),
    Now when the user press Enter the form is submitted like if the submit button was clicked!

    Thanks for all people help!

    Dani

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    What's needed is a domsubmit event to be fired whenever the BasicForm stops the DOM form from doing a proper submit:

    Code:
        onSubmit: function(e) {
            e.stopEvent();
            this.fireEvent("domsubmit", this, e);
        },
    Then, if you include a button with type:'submit' anywhere in the form*, you can add a handler for this event, and perform programmatic submission.

    * You'll have to wrap a border:false, layout:'form' Panel inside the FormPanel containing the Button.**

    ** Unless you go the step I have proposed in my feature request thread: http://extjs.com/forum/showthread.ph...612#post236612 where the overall FormPanel's el is the <form> not the body.