CODEWITHSUNDEEP
javascriptextjs
Sokmesa Khiev
Sokmesa Khiev

Reputation: 2920

Set focus on Extjs textfield

Currently I got problem with setting focus on extjs textfield. When form show, I want to set focus to First name text box and I try to use build in function focus() but still can't make it work. I am happy to see your suggestion.

var simple = new Ext.FormPanel({

    labelWidth: 75, 
    url:'save-form.php',
    frame:true,
    title: 'Simple Form',
    bodyStyle:'padding:5px 5px 0',
    width: 350,
    defaults: {width: 230},
    defaultType: 'textfield',
    items: [{
            fieldLabel: 'First Name',
            name: 'first',
            id: 'first_name',
            allowBlank:false
        },{
            fieldLabel: 'Last Name',
            name: 'last'
        },{
            fieldLabel: 'Company',
            name: 'company'
        }, {
            fieldLabel: 'Email',
            name: 'email',
            vtype:'email'
        }, new Ext.form.TimeField({
            fieldLabel: 'Time',
            name: 'time',
            minValue: '8:00am',
            maxValue: '6:00pm'
        })
    ],

    buttons: [{
        text: 'Save'
    },{
        text: 'Cancel'
    }]
});

simple.render(document.body);

Upvotes: 22

Views: 65281

Answers (11)

Ivan Matskan
Ivan Matskan

Reputation: 11

That works for me. In textfield or textarea add listeners config:

listeners:{
            afterrender:'onRender'
        }

After, in your controller write function:

onRender:function(field){
    Ext.defer(()=>{
        field.focus(false,100);
    },1);
}

Ext.defer is wrap for setTimout(). Without Ext.defer() field.focus() doesn't work and i don't why. You cant write that function in listeners config instead of using controller's function name, but good practice is hold functions in component's controller. Good luck.

Upvotes: 1

vahissan
vahissan

Reputation: 2332

Use afterlayout event. Set a flag on the element to prevent focusing multiple times for stability.

afterlayout: function(form) {
  var defaultFocusCmp = form.down('[name=first]');
  if (!defaultFocusCmp.focused) {
    defaultFocusCmp.focus();
    defaultFocusCmp.focused = true;
  }
}

Upvotes: 0

Gavin Palmer
Gavin Palmer

Reputation: 1220

My form was inside of a window and the textfield would not focus unless I focused the window first.

                listeners: {
                    afterrender: {
                        fn: function(component, eOpts){
                            Ext.defer(function() {
                                if (component.up('window')){
                                    component.up('window').focus();
                                }
                                component.focus(false, 100);
                            }, 30, this);
                        },
                        scope: me
                    }
                }

Upvotes: 0

Amit
Amit

Reputation: 962

I have also been struggling with getting the focus on a text box in the Internet Explorer(As the above suggestions are working fine in chrome and Firefox). Tried the solutions suggested above on this page but none of them worked in IE. After so many research I got the workaround that worked for me, I hope it will be helpful to others as well:

Use focus(true) or if you want to delay this then use focus(true, 200) simply. In ref of the above problem the code would be:

  {
        fieldLabel: 'First Name',
        name: 'first',
        id: 'first_name',
        allowBlank: false,
        listeners: {
          afterrender: function(field) {
            field.focus(true);
          }
        }
    }

Upvotes: 3

samsanthosh2008
samsanthosh2008

Reputation: 91

UIManager.SetFocusTo = function (row, column) {
    var grd = Ext.getCmp('gridgrn');
    grd.editingPlugin.startEditByPosition({ 'column': column, 'row': row });

}

Upvotes: -1

Carlos Gavidia-Calderon
Carlos Gavidia-Calderon

Reputation: 7253

I've been struggling with that issue today, and I think I got the solution. The trick is using the focus() method after the show() method was called on the Form Panel. That is, adding a listener to the show event:

Ext.define('My.form.panel', {
    extend: 'Ext.form.Panel',
    initComponent: function() {
        this.on({
            show: function(formPanel, options) {
                formPanel.down('selector-to-component').focus(true, 10);
            }
    });
    }
});

Upvotes: 3

Sokmesa Khiev
Sokmesa Khiev

Reputation: 2920

Based on Pumbaa80's answer and Tanel's answer I have tried many things and found a way to do it. Here is the code:

{
    fieldLabel: 'First Name',
    name: 'first',
    id: 'first_name',
    allowBlank: false,
    listeners: {
      afterrender: function(field) {
        field.focus(false, 1000);
      }
    }
}

Upvotes: 13

Raza Ahmed
Raza Ahmed

Reputation: 2751

why not just add defaultFocus : '#first_name' instead of adding to much lines of code?

OR, after this.callParent(arguments); add this line Ext.getCmp('comp_id').focus('', 10);

Upvotes: 5

user1662505
user1662505

Reputation: 41

Try to add the following property:

hasfocus:true,

and use the function below:

Ext.getCmp('first_name').focus(false, 200);

{
    id: 'fist_name',
    xtype: 'textfield',
    hasfocus:true,
}

Upvotes: 4

Tanel
Tanel

Reputation: 195

You should use "afterrender" event for your textfield if you want to set focus after form is rendered.

    {
        fieldLabel: 'First Name',
        name: 'first',
        id: 'first_name',
        allowBlank: false,
        listeners: {
          afterrender: function(field) {
            field.focus();
          }
        }
    }

Upvotes: 10

user123444555621
user123444555621

Reputation: 152966

Sometimes it helps to add a little delay when focusing. This is because certain browsers (Firefox 3.6 for sure) need a bit of extra time to render form elements.

Note that ExtJS's focus() method accepts defer as an argument, so try that:

Ext.getCmp('first_name').focus(false, 200);

Upvotes: 18

Related Questions