Focus "Next" button in wizard as soon as form details gets filled

[hemant123]

I am using card layout for wizard, I have put button control at bottom.
Buttons are "Next/Pre/Cancel".

I would like to have Next selected or focus as soon as I filled or complete the form. So I dont have to click manually with mouse. I just need to press enter so that the wizard goes to next step. Here is my code.


buildButtons : function() { return [ { text:'Back', id:'backBtn', hidden:true, autoHeight:true, action: 'Back' }, { text:'Next', id:'nextBtn', autoHeight:true, hidden:false, action: 'Next' }, { text:'Finish', id:'finishBtn', autoHeight:true, hidden:false, // Comments below line if you want finished button on each panel. //hidden:true, action: 'Finish' }, { text:'Cancel', id:'cancelBtn', autoHeight:true, hidden:false, action: 'Cancel' } ];}

[tvanzoelen]

Add a key listener to the fields or form wich listens to the enter event. You could use a KeyMap for example.

On keypress you call focus() on the button you want to have focus.

[hemant123]

If possible please send any Example for same.

[tvanzoelen]

havent tested it but something like this you can pass on to your fieldconfig

{ 
  enableKeyEvents: true,
  
  listeners: {
  
         keypress: {
              
             fn: function(c, e){
                  if(e.getKey() ==Ext.EventObject.ENTER){
                      nextButton.focus();
                  }
              }   
              
         }  

   } 

}

or enable keyevents in the config of your fields and

field.on('keypress', function(c, e){
                  if(e.getKey() ==Ext.EventObject.ENTER){
                      nextButton.focus();
                  }
              }   );

Also an option to set KeyNav on field or form

var nav = new Ext.KeyNav(field.getEl(), {

            "enter": {
               
                fn: function(e) {

                       nextButton.focus(); 
                        
                    }//fn
                }//left
            });

[hemant123]

Instead of enter can I make Next button highlight as soon as user finish entering details in form?

[mitchellsimoens]

new Ext.window.Window({
    autoShow     : true,
    width        : 400,
    height       : 400,
    dockedItems  : [
        {
            xtype : 'toolbar',
            dock  : 'bottom',
            items : [
                {
                    text   : 'Back',
                    action : 'back'
                },
                '->',
                {
                    text    : 'Next',
                    action  : 'next',
                    handler : function() {
                        console.log('Next');
                    }
                }
            ]
        }
    ],
    listeners : {
        afterrender : function(win) {
            var btn = win.down('button[action=next]');

            btn.focus(null, 80); //delay to let DOM settle down
        }
    }
});