Set focus on Extjs textfield

user_1260905 0
Viewed 62128

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);
extjs javascript
11 Answers

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.

user_103902780
Related