1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    7
    Vote Rating
    0
    hemant123 is on a distinguished road

      0  

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

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


    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' } ];}

  2. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,111
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    7
    Vote Rating
    0
    hemant123 is on a distinguished road

      0  

    Default


    If possible please send any Example for same.

  4. #4
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,111
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


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

    Code:
    { 
      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

    Code:
    field.on('keypress', function(c, e){
                      if(e.getKey() ==Ext.EventObject.ENTER){
                          nextButton.focus();
                      }
                  }   );
    Also an option to set KeyNav on field or form

    Code:
    var nav = new Ext.KeyNav(field.getEl(), {
    
                "enter": {
                   
                    fn: function(e) {
    
                           nextButton.focus(); 
                            
                        }//fn
                    }//left
                });

  5. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    7
    Vote Rating
    0
    hemant123 is on a distinguished road

      0  

    Default


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

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,649
    Answers
    3454
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Code:
    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
            }
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.