1. #1
    Sencha User ksumarine's Avatar
    Join Date
    Feb 2012
    Posts
    16
    Vote Rating
    0
    ksumarine is on a distinguished road

      0  

    Question Unanswered: Passcode Login

    Unanswered: Passcode Login


    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!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,649
    Vote Rating
    898
    Answers
    3575
    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


    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.
    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.

  3. #3
    Sencha User ksumarine's Avatar
    Join Date
    Feb 2012
    Posts
    16
    Vote Rating
    0
    ksumarine is on a distinguished road

      0  

    Default


    Nice...

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

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

Thread Participants: 1

Tags for this Thread