Results 1 to 4 of 4

Thread: Clear focus of Textfield

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    15

    Default Clear focus of Textfield

    Hi,
    Currently I'm working on a project with a registration form.
    The form contains some textfields and passwordfield. The height of the fieldset is bigger than the screen with keyboard (Android).
    When I have focus on the top textfield and try to scroll, its not possible because it always jumps back to the top field. This is a problem when the focus is at the 'userName'-textfield and I would like to go to the button and submit the form. Its only possible if I change the focus or hide the keyboard

    How can I release the focus of the textfield when I try to scroll the page? Any ideas?

    Code:
    Ext.define('myapp.view.RegistrationForm', {
        extend: 'Ext.form.FormPanel',
        xtype: 'registrationformpage',
        id: 'registrationForm',
        
        config: {
            title: 'Registration',
            
            items: [
                    {
                        html: '<br/>'
                    },
                    {
                        xtype: 'fieldset',
                        defaults: {
                            labelWidth: "40%",
                        },
                        
                        items: [
                            {
                                id: 'userName',
                                xtype: 'textfield',
                                name: 'userName',
                                label: 'Username',
                                labelAlign: 'left',
                                placeHolder: 'Benutzername',
                                autoCapitalize: true,
                                required: true
                            },
                            {
                                id: 'password',
                                xtype: 'passwordfield',
                                name: 'password',
                                label: 'Passwort',
                                labelAlign: 'left',
                                placeHolder: 'Passwort',
                                required: true
                            },
                            {
                                id: 'password2',
                                xtype: 'passwordfield',
                                name: 'password2',
                                label: 'Confirm PW',
                                labelAlign: 'left',
                                placeHolder: 'Passwort',
                                required: true
                            },
                            {
                                id: 'firstname',
                                xtype: 'textfield',
                                name: 'firstname',
                                label: 'Vorname',
                                labelAlign: 'left',
                                placeHolder: 'Hans',
                                required: true
                            },
                            {
                                id: 'lastname',
                                xtype: 'textfield',
                                name: 'lastname',
                                label: 'Nachname',
                                labelAlign: 'left',
                                placeHolder: 'Muster',
                                required: true
                            },
                            {
                                id: 'emailAddress',
                                xtype: 'textfield',
                                name: 'emailAddress',
                                label: 'E-Mail',
                                labelAlign: 'left',
                                placeHolder: '[email protected]',
                                required: true
                            }
                        ]
                    },
                    {
                        xtype: 'button',
                        ui: 'confirm',
                        text: 'Registrieren',
                        action: 'submitRegistration'
                    }
            ]
        }
    });
    Thx in advance.
    neutr0n

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    Execute blur on the field.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    15

    Default

    Hmm so I have to listen for the 'touchmove' event? I tried this before but didn't received the event in the controller If I am able to receive this event i can call the blur() function at this time.

    is there something wrong with my code?

    Code:
    init: function() {
    		console.info('Init RegistrationController');
    		this.control({
    			'button[action=submitRegistration]': {
    				tap: 'submitRegistration'
    			},
    			'touchmove': function() {
    				//do something....
    			}
    		})
    	},

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    15

    Default

    Ok, the event is now fiering correct and i can call the blur()-methode but now i got an other problem:
    When the field looses the focus, the keyboard didn't hide and still remines on the screen. Sencha thinks, that the full hight of the screen is usable and places some elements behind the keyboard.
    Because the size of the page is nearly the size of the screen, it wouldnt scroll.
    When i press a button on the keyboard, android hides the keyboard.

    Someone has the same problem or a solution?

    I also tried to add a new element to the DOM, set the focus on it, and disabled it --> same problem as described above.

    Chears

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •