You found a bug! We've classified it as TOUCH-2969 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User aatiis's Avatar
    Join Date
    Nov 2011
    Location
    Bajmok, Serbia
    Posts
    60
    Vote Rating
    3
    aatiis is on a distinguished road

      0  

    Default Last textfield in form gets focused

    Last textfield in form gets focused


    We have the following problem in Mobile Safari (on iOS only): the last textfield (or textareafield) in a form gets automatically focused when the form is pushed to our main navigation view (using a ref with autoCreate: true.)

    The view looks like this (CoffeeScript):

    Code:
     1 ###
     2 #
     3 # Account Settings: Password page view.
     4 #
     5 ###
     6
     7
     8
     9 Ext.define "V.view.SettingsAccountPassword",
    10     extend: "V.view.SettingsForm"
    11     alias: "widget.settingsaccountpassword"
    12
    13     config:
    14         title: "Password"
    15         items: [
    16             xtype: "fieldset"
    17             title: "Old password"
    18             items: [
    19                 name: "password"
    20                 xtype: "textfield"
    21                 clearIcon: false
    22             ]
    23         ,
    24             xtype: "fieldset"
    25             title: "New password"
    26             items: [
    27                 name: "password_new"
    28                 xtype: "textfield"
    29                 clearIcon: false
    30             ]
    31         ,
    32             xtype: "fieldset"
    33             title: "Repeat new password"
    34             items: [
    35                 name: "password_new_confirm"
    36                 xtype: "textfield"
    37                 clearIcon: false
    38             ]
    39         ,
    40             xtype: "panel"
    41             layout: "hbox"
    42             items: [
    43                 xtype: "button"
    44                 text: "Save"
    45                 ui: "confirm"
    46                 # The class name is to work around the flex bug:
    47                 cls: "v-1-3"
    48                 flex: 1
    49             ,
    50                 xtype: "spacer"
    51                 flex: 2
    52             ]
    53         ]

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

      1  

    Default


    That's odd. You can work around this by not letting the refs create your view. I will report this as a bug.

    Code:
    Ext.define('Test.controller.Main', {
        extend : 'Ext.app.Controller',
    
        config : {
            refs : {
                myform : {
                    autoCreate : true,
                    selector   : 'myform',
                    xtype      : 'myform'
                }
            },
    
            control : {
                'button' : {
                    tap : 'pushForm'
                }
            }
        },
    
        pushForm : function(button) {
            var navView = button.up('navigationview');
    
            navView.push({
                xtype : 'myform',
                title : 'Form'
            });
        }
    });
    
    Ext.define('Test.view.MyForm', {
        extend : 'Ext.form.Panel',
        xtype  : 'myform',
    
        config : {
            items : [
                {
                    xtype : 'textfield',
                    label : 'One'
                },
                {
                    xtype : 'textfield',
                    label : 'Two'
                },
                {
                    xtype : 'textfield',
                    label : 'Three'
                }
            ]
        }
    });
    
    Ext.application({
        name : 'Test',
    
        controllers : [
            'Main'
        ],
    
        launch : function() {
    
            new Ext.navigation.View({
                fullscreen : true,
                items      : [
                    {
                        title : 'Home',
                        items : [
                            {
                                xtype : 'button',
                                text  : 'Push View'
                            }
                        ]
                    }
                ]
            });
    
        }
    });
    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 aatiis's Avatar
    Join Date
    Nov 2011
    Location
    Bajmok, Serbia
    Posts
    60
    Vote Rating
    3
    aatiis is on a distinguished road

      0  

    Default


    I can reproduce this even when the view is not created by refs.

    Code:
    Ext.define('MyApp.view.Test', {
      alias: 'widget.test',
      extend: 'Ext.form.Panel',
      config: {
        xtype: 'fieldset',
        defaults: {
          xtype: 'textfield'
        },
        items: [{
          name: 'one'
        }, {
          name: 'two'
        }, {
          name: 'three'
        }]
      }
    })
    
    Ext.Viewport.setActiveItem({
      xtype: 'test'
    })
    The last textfield will be focused the first time this view is added to the viewport.

Thread Participants: 1

Tags for this Thread