PDA

View Full Version : setting focus to a field on a window



WBarnie
10 Aug 2009, 5:55 AM
I have a window and I am trying to set focus on the first field. I have looked through posting for setting focus but have not come across anything helpful. Here is the the javaScript



function addUser() {
if(!winAddUser){
winAddUser = new Ext.Window({
applyTo : "addUser-win",
modal: true,
center: true,
layout : "fit",
width : 700,
height : 80,
closeAction :"hide",
plain : false,
shadow: true,
buttons: [{
text : "Add",
tabIndex: 19,
handler : function(){
winAddUser.hide();
}
},{
text : "Cancel",
tabIndex: 20,
handler : function(){
winAddUser.hide();
}
}]
});
}
winAddUser.show();
Ext.getCmp("firstName").focus();


The HTML page does have tabIndex defined for the fields but they seam to be ignored. How do I set focus to a field on the window?

Condor
10 Aug 2009, 6:21 AM
Add defaultButton:'firstName' to the window config.

WBarnie
10 Aug 2009, 6:27 AM
I added defaultButton:'firstName' to the configuration but it did not work.

Condor
10 Aug 2009, 6:30 AM
I don't see a field with id:'firstName' in your config...

WBarnie
10 Aug 2009, 6:42 AM
That correct. I am using the applyTo which is a div on html. The firstName is an inout field within the div.

Condor
10 Aug 2009, 7:00 AM
Is 'firstName' really a component (Ext.getCmp) or is it an <input> element (Ext.get)?

Try:

defaultButton:Ext.get('firstName')

WBarnie
10 Aug 2009, 7:04 AM
it is an input element. I did try



Ext.get("firstName").focus();


and that too does not work.

Condor
10 Aug 2009, 7:06 AM
That is because win.show() will focus the window itself after 50ms.

This should probably work:

Ext.get("firstName").focus(60);

(but I still recommend using defaultButton, because it make the window focus the input instead of itself)

steffenk
10 Aug 2009, 7:12 AM
i tried it too, and focus method doesn't work, even the way documentation tells:
focus(string, delay)
I also tried to put in in listener of window:

listeners: {
afterrender: function() {
Ext.getCmp("firstName").focus();
}
}

without success. defaultButton would be an option, but may be you want to have it dynamically. Interested in solution ;)

WBarnie
10 Aug 2009, 7:14 AM
I tried defaultButton and that does not work. I also tried:



Ext.get("firstName").focus(60);


and tha does not work. here is the full javascript



function addUser() {
if(!winAddUser){
winAddUser = new Ext.Window({
applyTo : "addUser-win",
modal: true,
center: true,
layout : "fit",
width : 700,
height : 80,
closeAction :"hide",
plain : false,
shadow: true,
buttons: [{
text : "Add",
tabIndex: 19,
handler : function(){
winAddUser.hide();
}
},{
text : "Cancel",
tabIndex: 20,
handler : function(){
winAddUser.hide();
}
}]
});
}
winAddUser.show();
Ext.get("firstName").focus(60);
}


some of the html


<div id="addUser-win" class="x-hidden win_BG">
<div class="x-window-header">Add User</div>
<table>
<tbody>
<tr>
<td>
<label for="firstName">First Name*</label>
</td>
<td>
<input tabindex="1" maxlength="35" size="35" value="" id="firstName" name="firstName" />
</td>
</tr>
</tbody>
</table>
</div>



thank you for your help