1. #1
    Ext User the.jxc's Avatar
    Join Date
    Mar 2009
    Posts
    16
    Vote Rating
    0
    the.jxc is on a distinguished road

      0  

    Default Cannot get focus into a TextField in a popup window?

    Cannot get focus into a TextField in a popup window?


    I'm attempting to do the same thing as in this post.
    http://www.sencha.com/forum/showthread.php?98066

    However, under 3.1 at least, this seems not to focus any component at all. I have a very simple test case which shows that calling component.focus () on a window's show handler does not (on Chrome with 3.1.0) seem to put focus in the textfield.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" type="text/css" href="http://extjs-public.googlecode.com/svn/tags/extjs-3.2.1/release/resources/css/ext-all.css" />
        <script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/extjs-3.2.1/release/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/extjs-3.2.1/release/ext-all.js"></script>
        <script type="text/javascript">
    Ext.onReady (function () {
        var popupw = new Ext.Window ({
            width: 300, height: 120,
            items: [{
                xtype: 'panel', border: false,
                layout: 'form', labelWidth: 100, labelAlign: 'right',
                items: [
                    { id: 'Name', itemId: 'Name', fieldLabel: 'Name', xtype: 'textfield', tabIndex: 0 }
                ]
            }],
            listeners: {
                'render': function (win) {
                    win.findById ('Name').focus ();
                }
            }
        });
        popupw.setVisible (true);
    });
        </script>
    </head>
    <body>
        <div id="extjs" style="width: 300; height: 300">
        </div>
    </body>
    </html>
    All very simple. No rocket surgery. So why no focus? Anybody care to whack me with the clue stick?

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,545
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    The legacy-named defaultButton config does this.

    I think the 4.0 release will see this deprecated and a better name for a default focus item.

  3. #3
    Ext User the.jxc's Avatar
    Join Date
    Mar 2009
    Posts
    16
    Vote Rating
    0
    the.jxc is on a distinguished road

      0  

    Default


    Hmm... the following code still stubbornly refuses to place focus into the text box. I had a look at Window.js, and I see that defaultButton is referenced in Ext.Window.focus(). I called that, just to be sure. But nope, still not a soggy sausage.

    Modified code is as follows:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" type="text/css" href="http://extjs-public.googlecode.com/svn/tags/extjs-3.2.1/release/resources/css/ext-all.css" />
        <script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/extjs-3.2.1/release/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/extjs-3.2.1/release/ext-all.js"></script>
        <script type="text/javascript">
    Ext.onReady (function () {
        var popupw = new Ext.Window ({
            defaultButton: 'Name',
            width: 300, height: 120,
            items: [{
                xtype: 'panel', border: false,
                layout: 'form', labelWidth: 100, labelAlign: 'right',
                items: [
                    { id: 'Name', itemId: 'Name', fieldLabel: 'Name', xtype: 'textfield', tabIndex: 0 }
                ]
            }]
        });
        popupw.setVisible (true);
        popupw.focus ();
    });
        </script>
    </head>
    <body>
        <div id="extjs" style="width: 300; height: 300">
        </div>
    </body>
    </html>
    Clicking on the window title bar won't bring focus into the text field. The only thing that will is clicking on the text field or the associated label.

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Why are you using setVisisble(true) and focus()? What is wrong with simply calling show()?

    Your solution should be correct (setting defaultButton to the id of the field).

  5. #5
    Ext User the.jxc's Avatar
    Join Date
    Mar 2009
    Posts
    16
    Vote Rating
    0
    the.jxc is on a distinguished road

      0  

    Default


    In theory, .setVisible(true) is identical to .show(). I just enjoy typing.

    I changed it to simply .show() and made the file available online at the following address:

    http://www.nsquared.co.nz/demo/misc/focus_test.html

    It does not appear to give focus to the "Name" component when the window appears. I tested on:
    - IE (windows)
    - Chrome (linux)
    - FireFox (linux)

    None of them place a cursor in the text field in the popup window.

    Is this a bug? Could somebody kindly click on the link and just confirm my results?

  6. #6
    Sencha User darthwes's Avatar
    Join Date
    Mar 2010
    Posts
    633
    Vote Rating
    -11
    darthwes can only hope to improve

      0  

    Default


    1. I see your bug, it exists for all of Ext > 3.2 ...
    2. You said 3.1? It works in 3.1 (well it works in 3.1.1, breaks @ 3.2, I assume it worked prior to 3.1.1)...

  7. #7
    Ext User the.jxc's Avatar
    Join Date
    Mar 2009
    Posts
    16
    Vote Rating
    0
    the.jxc is on a distinguished road

      0  

    Default


    OK, I think I have identified a potential cause of the problem.

    At line 25604 line there is the following test:

    Code:
                if (el && ct) {
                    if (!Ext.lib.Region.getRegion(ct).contains(Ext.lib.Region.getRegion(el.dom))){
                        return;
                    }
                }
    This condition matches, and the return statement at 25606 is invoked. The focus function returns before it actually calls

    Code:
            f = f || this.focusEl;
            f.focus.defer(10, f);
    ...at 25610.

    Checking out the immediates window (is it just me, or is Chrome's debugger even better than Firebug?)

    "el" (which is the textfield "Name" which I wanted to have focus).

    Code:
    Ext.lib.Region.getRegion(el.dom)
    Object
      0: 589
      1: 412
      bottom: 434
      left: 589
      right: 726
      top: 412
    while ct (a HTMLBodyElement, the <body> element for my entire page)

    Code:
    Ext.lib.Region.getRegion(ct)
    Object
      0: 0
      1: 0
      bottom: 0
      left: 0
      right: 1254
      top: 0
    ...appears to have zero height. So .focus() says my text field is not contained in its container, so it can't have focus.

    That's a bit rough. We are asking
    "does the textfield fit inside the popup window's parent".

    Surely a kinder question would be
    "does the textfield fit inside the popup window".

    Thoughts?

  8. #8
    Ext User the.jxc's Avatar
    Join Date
    Mar 2009
    Posts
    16
    Vote Rating
    0
    the.jxc is on a distinguished road

      0  

    Default


    You're right darthwes. The "defaultButton" DOES work in 3.1.0.

    It seems that my original program on 3.1 was broken due to my own misunderstanding, or some other silliness.

    But then I went on to create a simplified version using defaultButton suitable for posting. I swapped to 3.2.1 for that demo code since 3.2 was the version I found on Google API. I then ran into what appears to be a real bug in 3.2!

    The "contains" test I identified as problematic in 3.2 is not present in the 3.1.0 version.

  9. #9
    Sencha User darthwes's Avatar
    Join Date
    Mar 2010
    Posts
    633
    Vote Rating
    -11
    darthwes can only hope to improve

      0  

    Default


    Affirmative. The container that is holding the window doesn't have a height. Initialize a viewport
    Code:
    var vp = viewport({...});
    and try window.show(vp)? You might have to pass id, check docs. There is a way, I just don't know it, gotta eat!

  10. #10
    Ext User the.jxc's Avatar
    Join Date
    Mar 2009
    Posts
    16
    Vote Rating
    0
    the.jxc is on a distinguished road

      0  

    Default


    My short-term fix is to stick with 3.1. Not sure if the viewport solution is a good long-term approach!

    P.S. True story. Was in Poland. Went to Krakow for the day. Kept thinking of Calvin.

Similar Threads

  1. [Solved] Window.show and TextField focus
    By mohaaron in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 10 Aug 2010, 2:56 PM
  2. MessageBox steals popup focus (IE)
    By egotec in forum Ext GWT: Discussion
    Replies: 3
    Last Post: 28 Jul 2010, 11:31 AM
  3. Change dynamic text for textfield in GridPanel popup window?
    By la_ka in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 18 May 2010, 10:47 AM
  4. Popup Window lost focus
    By randomuser01 in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 8 Feb 2010, 1:09 AM
  5. Focus is not in textfield after changing the window
    By lukas.wappler in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 8 Aug 2008, 5:18 AM

Thread Participants: 3

Tags for this Thread