Unable to setFocus for Extjs textfield

Question

I am new to Extjs. I have form with field. I need to set focus for particular field. Here is the code I am using.

var priceTFLme = {
    xtype: 'numberfield',
    id:'priceLme',
    fieldLabel: 'Price',
    name: 'price',
    value: bidOffer,
    minValue: 0,
    maxValue: 100,
    allowDecimals: true,
    decimalPrecision: 3,
    step: 0.005,
    vtype: 'natural'
};

var quantityTFLme = {
    xtype: 'textfield',
    id: 'quantityLme',
    fieldLabel: 'Quantity',
    value: '',
    editable: true,
    hasFocus: true,
    vtype: 'natural',
    listeners: {
        afterrender: function(field) {
            field.focus(false, 1000);
        }
    }
};

var formLME =  new Ext.FormPanel({
    labelWidth:  85,
    frame:true,
    id:'lmeHeaders',
    bodyStyle:'padding:10px 10px 0',
    defaults: {width: 225},
    defaultType: 'textfield',

    items: [quantityTFLme, priceTFLme ],

    buttons: [{
        id:'buyIdLME',
        handler: function () {

        }
    }, {
        id:'sellIdLME',
        handler: function () {

        }
    }]
});

var winLme = Ext.widget('window', {
    closeAction: 'close',
    layout: 'fit',
    resizable: false,
    constrain: true,
    modal: true,
    items: formLME  
});

function requestForLMEPrice() {
    if (!winLme.rendered) {
        winLme.render(Ext.getBody());
    }
    winLme.center();
    winLme.show();
} 

I have field to focus has Quantity. But i am unable to focus.

Can anyone help on this?

also, I have tried using Ext.getCmp('quantityTFLme').focus(false, 200);

Answer 1

Try defer before triggering focus,

sample code:

afterrender: function(field) {
   Ext.defer(function() {
       field.focus(true, 100);
   }, 1);
}