View Full Version : Can not focus a textfield when window animateTarget be set

16 Sep 2013, 9:50 PM

I want to set the input focus to the first textfield in a form within a window.

If the animateTarget was set to ducument.body, the textfield was not focused.

I tried to listen to render/show/afterrender events, but the result was the same.

My test code:

Ext.define('myWindow', {
extend: 'Ext.window.Window',

initComponent: function() {
this.items = Ext.create('Ext.form.Panel', {
defaults: {
anchor: '92%',
margin: '10 0 10 0',
allowBlank: false
fieldDefaults: {
labelWidth: 60,
labelAlign: 'right',
autoFitErrors: false
items: [{xtype: 'textfield', name: 'name', fieldLabel: 'Name'}],
buttons: [{text: 'Submit', formBind: true, handler: this.onSubmit, scope: this}]

Ext.apply(this, {
title: 'Window',
width: 300,
modal: true,
autoScroll: true,
resizable: false,
buttonAlign: 'center',
animateTarget: document.body, //remove this item, focus will be OK
listeners: {show: this.setFocus}


setFocus: function() {
this.down('textfield').focus(false, 500);

Ext.onReady(function () {


17 Sep 2013, 7:53 AM
The problem is window focusing itself after animate. You may try to override its focus method to focus a different el, e.g. textfield's one.

17 Sep 2013, 6:15 PM
I found a workaround.
"defaultFocus: 'textfield'"
It can work.