Passcode Login

[ksumarine]

I'm trying to create a passcode login screen for my app. See the attached image for an example:

photo.PNG

Basically one number per password field and it sends you to the next field automatically.

Does anyone have any examples of this functionality? Is there a way to show the number pad instead of the keyboard with numbers and also have the input show like a password field?

I'm just not sure of the best way to accomplish this. Any help would be awesome.

Thanks everyone!

[mitchellsimoens]

You can use the Ext.field.Number to show the number keyboard. You can listen for the keydown event n the fields and make sure it is numeric. If it is then advance to the next field. Also watch for the delete key.

[ksumarine]

Nice...

This is what I ended up with and it worked. I got the example from another post I found of yours through google.

var myForm = Ext.create('Ext.form.Panel',{
	fullscreen: true,
	id:'loginForm',
	defaults: {
		required: true,
		inputCls: 'formField',
		maxLength:1,
		listeners: {
			initialize: function(form, result) {
				var me = this,
				input = form.element.down('input');
				console.log(input);
				
				input.set({
					pattern : '[0-9]*'
				});
			}
		}
	},
	items: [
		{
			xtype: 'passwordfield',
			name: 'password1',
			id: 'pass1'
		},
		{
			xtype: 'passwordfield',
			name: 'password2',
			id: 'pass2'
		},
		{
			xtype: 'passwordfield',
			name: 'password3',
			id: 'pass3'
		},
		{
			xtype: 'passwordfield',
			name: 'password4',
			id: 'pass4'
		}
	]
});

Now I need to make the rest of it work. Thank you!