Results 1 to 6 of 6

Thread: ExtJS 6 modern toolkit: How to set focus on text field

  1. #1
    Sencha Premium User
    Join Date
    Apr 2010
    Location
    Ravensburg
    Posts
    15
    Vote Rating
    0
      0  

    Default ExtJS 6 modern toolkit: How to set focus on text field

    Hi all,

    I'm new in ExtJS modern toolkit.
    I try to set focus on the text field directly in the onActivate handler of my main panel.
    All my attempts are not working.

    This is the items config :
    items: [
    {
    xtype: 'textfield',
    style: 'border: 1px solid lightgrey;',
    width: '90%',
    border: true,
    label: 'Scan code',
    itemId: 'scanCode',
    labelAlign: 'top',
    name: 'sCode'
    },
    {
    xtype: 'hiddenfield'
    }
    ],

    This is what I try to do in the onPanelActivate handler:

    var me=this,
    view=me.getView(),
    bCode=view.down('#scanCode');
    if(!Ext.isEmpty(bCode)){
    bCode.setValue(null);
    //setTimeout(function(){bCode.focus();}, 500);
    setTimeout(function(){
    document.getElementsByName('sCode')[0].focus();
    }, 500);
    }

    Any suggestions?

    ~ Boris

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,385
    Answers
    3997
    Vote Rating
    1540
      -1  

    Default

    Remember there is a focus method on the form field so you don't have to go to the lower DOM level.

    You should also note that on a mobile device (especially iOS) the focus has to occur with a time limit of another user interaction. You cannot just focus a field whenever you want, Apple doesn't want to allow this.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

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

  3. #3
    Sencha Premium User
    Join Date
    Apr 2010
    Location
    Ravensburg
    Posts
    15
    Vote Rating
    0
      0  

    Default

    @Mitchell

    thank you for the answer.

    'the focus has to occur with a time limit of another user interaction'

    means that I can set focus but not in onActivate event, right?
    What about onTap event on a hidden button for example?
    Just set focus inside onTap.
    How can I set the time limit? I use setTimeout to defer the focus action.

    ~Boris

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,385
    Answers
    3997
    Vote Rating
    1540
      -1  

    Default

    It's not a configurable limit, it's Apple imposed. They seem to not want you to programmatically focus for the user so it has to come within like 300ms (is just a guess, not sure if it is 300ms or 100ms or 3000ms) of another user iteraction. So if a user taps on something in your app and you move to a new view with a textfield and you want to focus on that textfield, you have to do it within that imposed time limit.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

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

  5. #5
    Sencha Premium User
    Join Date
    Apr 2010
    Location
    Ravensburg
    Posts
    15
    Vote Rating
    0
      0  

    Default

    @Mitchell,

    many thanks for the Info.
    I will try to adjust the time gap in my App to set focus.

    ~Boris

  6. #6
    Sencha Premium Member
    Join Date
    Aug 2013
    Posts
    4
    Vote Rating
    0
      0  

    Default

    have the same problem, it works on all browsers but does not work in iOS, the css is set (border on field) but the focus is not and the keyboard is also not shown.

    var sForm = view.push({
    xtype: 'searchform',
    title: 'Search'
    });

    setTimeout(function() {
    sForm.down('searchfield').focus();
    }, 50);

Similar Threads

  1. Replies: 1
    Last Post: 30 Dec 2016, 2:15 PM
  2. How to use calendar in extjs modern toolkit ?
    By sahiltanta in forum Ext 6.2 Early Access
    Replies: 3
    Last Post: 23 Aug 2016, 10:55 PM
  3. [FIXED] modern toolkit : change event is not fired in Ext.field.Toggle on ext-6.2.0.758
    By David Robert Keller in forum Ext 6.2 Early Access
    Replies: 4
    Last Post: 12 Aug 2016, 7:43 AM
  4. Replies: 6
    Last Post: 4 May 2016, 9:43 PM
  5. Replies: 2
    Last Post: 16 Sep 2015, 6:07 PM

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
  •