1. #1
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    855
    Vote Rating
    38
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      0  

    Default [FR] Focus on first form field

    [FR] Focus on first form field


    Quite surprised this isn't done by default really.

    When a show a FormPanel shouldn't the first field have focus?
    If not by default then would be nice to have a method to do it.

    This not appearing to work at present, but may have a silly err:
    Code:
        listeners: {
            afterrender: {
                fn: function(component) {
                    // Focus on the first field
                    var form = component.getForm();
                    if (form) {
                        var fields = form.getFields();
                        if (fields && fields.items && fields.items.length) {
                            fields.items[0].focus(true, true);
                        }
                    }
                }
            }
        }
    Show doesn't appear to fire for the panel, but suspect afterrender is the wrong event.

    Cheers,
    Westy

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


    This put the cursor in for me:

    Code:
    new Ext.form.FormPanel({
        renderTo    : Ext.getBody(),
        width       : 400,
        defaultType : "textfield",
        defaults    : { anchor : "99%" },
        items       : [
            { fieldLabel : "Field One" },
            { fieldLabel : "Field Two" },
            { fieldLabel : "Field Three" }
        ],
        listeners   : {
            afterrender : function(form) {
                var field = form.getComponent(0);
                field.focus(true, true);
            }
        }
    });
    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
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    855
    Vote Rating
    38
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      0  

    Default


    Hmm, doesn't for me...

    Only obvious difference I can see is the fact my panel is on a window rather than rendered to the body.
    That and the 99% anchor.

    Will keep digging.

    Still, would be nice if it was the default behaviour

    Cheers,
    Westy

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,649
    Vote Rating
    817
    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


    Put it in a Window and sure enough breaks the focus. Even tried delaying it but never puts the cursor in there. Weird.
    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.

  5. #5
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    855
    Vote Rating
    38
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      0  

    Default


    Hmm, weird indeed.... guess this should be moved to bugs then, or a bug raised off the back of it...

Similar Threads

  1. How to set focus in the form field
    By naspar in forum Ext 3.x: Help & Discussion
    Replies: 6
    Last Post: 25 May 2010, 1:16 AM
  2. How to focus a form field on render?
    By mschwartz in forum Ext 3.x: Help & Discussion
    Replies: 19
    Last Post: 28 Nov 2009, 10:59 AM
  3. Focus on field in form
    By dhanek in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 12 Sep 2007, 8:52 PM
  4. Ext.form cannot focus field in IE7
    By pomata in forum Ext 1.x: Help & Discussion
    Replies: 7
    Last Post: 3 May 2007, 11:14 AM
  5. form field in dialog no focus?
    By benny in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 30 Apr 2007, 1:56 AM

Thread Participants: 1