PDA

View Full Version : Focus "Next" button in wizard as soon as form details gets filled



hemant123
8 Nov 2012, 1:53 AM
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
8 Nov 2012, 2:47 AM
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
8 Nov 2012, 5:12 AM
If possible please send any Example for same.

tvanzoelen
8 Nov 2012, 5:31 AM
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
8 Nov 2012, 10:39 PM
Instead of enter can I make Next button highlight as soon as user finish entering details in form?

mitchellsimoens
10 Nov 2012, 6:05 AM
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
}
}
});