ExtJS component get the different position from afterrender and focus event?

Question

Hi I tried to get component position but I found the getXY() will show diffrent position in different events.

like this sample, fiddle

init: function() {
    var me = this;

    me.control({
        'textfield[itemId=field]': {
            change: me.changeField,
            focus: me.focusField,
            afterrender: me.afterRenderField
        }

    });

},

focusField: function(field, event) {
    console.log(field.getXY());
},

changeField: function(field, newValue, oldValue) {
    console.log(field.getXY());
},

afterRenderField: function(field) {
    console.log(field.getXY());
}

I think the correct position is in focus and change events. Why afterrender is different?

I want to do something after the component is rendered so I need to get the correct position.

Answer 1

you can use the event boxready

the reason for the difference is event the object is rendered it's not lay out yet.