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
    Ext User dlbjr's Avatar
    Join Date
    Oct 2007
    Location
    Cache, OK USA
    Posts
    280
    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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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,483
    Vote Rating
    35
    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,483
    Vote Rating
    35
    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.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar