PDA

View Full Version : Form in a Window: focusing element after the window is opened



Qtx
6 Aug 2009, 6:12 AM
I have a modal window with a form. I want an input field to get the focus upon opening of the window.

Trying to focus the filed immediately after calling win.show() does not help. Although the field gets the focus for a moment, but then it disappears. Focusing in events like

afterlayout
afterrender
show
resize

has the same result - the field gets the focus for a moment, but then it disappears.

I suppose, when the window is completely rendered and displayed, it gets the focus, which causes loosing the focus of the previously focused element.

How can I focus an element in the modal window upon opening?

venu
7 Aug 2009, 2:32 AM
I too facing the same problem.

Any solution for this?

Qtx
7 Aug 2009, 2:37 AM
I assume that no more event is fired after the final internal focusing of the window upon opening. The goal is to set own focus after the internal focusing and not before. Only delayed focusing might help something like setTimeout(focus_element, ...), althought this is not a clean solution.

tryanDLS
7 Aug 2009, 6:58 AM
I would think you should be able to call focus with a defer call after show. Post your code.

Qtx
7 Aug 2009, 7:14 AM
I would think you should be able to call focus with a defer call after showIf you mind the call back function of the show() method, I tried it also. The result is the same. See the example. Only setTimeout helps.

Defer call works but, if for some reasons the opening of the window takes too long, so that the defer call occurs early, the same problem will arise.

I slightly modified the hello.js example


function focus_default_element()
{
Ext.get('uname').focus();
}

Ext.onReady(function(){
var win;
var button = Ext.get('show-btn');

button.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
if(!win){
win = new Ext.Window({

width:500,
height:300,
closeAction:'hide',
plain: true,

items: new Ext.FormPanel({

frame: true,
border: false,
labelWidth: 170,
autoHeight:true,
defaults: { width: 270 },
defaultType: 'textfield',

items: [{
fieldLabel: 'uname',
id: 'uname',
name: 'uname'
},{
fieldLabel: 'email',
id: 'email',
name: 'email'
}
]
}),

buttons: [{
text:'Submit',
disabled:true
},{
text: 'Close',
handler: function(){
win.hide();
}
}]
});
}
win.show(null, function () { focus_default_element });

//setTimeout(focus_default_element, 1000);
});
});

tryanDLS
7 Aug 2009, 9:23 AM
win.show(null, function () { focus_default_element });


should be


win.show(null, focus_default_element);
or
win.show(null, function() {focus_default_element();});

Qtx
7 Aug 2009, 10:25 AM
I corrected the example, it did not help.

tchitani
12 Aug 2009, 7:04 PM
Try:



function focus_default_element()
{
Ext.get('uname').focus('',500);
}

venu
24 Aug 2009, 1:19 AM
This is the code that worked for me, maybe helpful to someone.



Within the FormPanel
------------------------
this.formPanel.on('render', function() {
var foc = this.formPanel.getForm().findField('label');
if(foc) {
foc.focus();
}
}, this, {delay: 1000});


While showing the Window
------------------------------
conceptsPanel.on('addItem', function(){
if(!addItemWindow) {
addItemWindow = new AddItemWindow();
}
addItemWindow.reset();
addItemWindow.show();
Ext.getCmp('id_addItemWindow').formPanel.getForm().findField('label').focus(true, 500);
});


Thx.

Qtx
24 Aug 2009, 1:29 AM
Thanks for suggestions. But, as I wrote in my second message, the delay helps but it is not "pretty" solution. If the delay is too small, the focus is being sometimes still taken away. If it is too big, is is also not optimal, because the user already sets the focus per hand to the desired element before.

Animal
24 Aug 2009, 1:52 AM
Configure the Window with



defaultButton: 'label'


(Or whatever the ID is of the required default focussed Component)