PDA

View Full Version : Issues with focusing TextFields and ComboBoxes



vivitron
9 Jul 2009, 7:33 AM
I just got through upgrading to ExtJS 3.0 and was happy not to have any real issues.

The only problem I'm having is that Firefox refuses to focus fields. In ExtJS 2.0, it worked fine. It still works in 3.0 with Chrome & IE 8.

Say I have a new window that has a combo box called cboAdd...

I call newWin.show(); then cboAdd.focus(true, 10);

Sometimes it focuses for a split second and then loses it's focus, but often it never focuses. I've tried increasing the 10 to 50 and had the same result. I've read about Firefox not showing the cursor, but that is not the case. These are all modal windows and if I start tabbing, the page under the window is where the focus is.

Sample code:


var newLoginWindow = new Ext.Window({
title: 'Login',
modal: true,
closable: false,
height: 200,
width: 400,
layout: 'border',
keys: [{
key: [10,13],
fn: doLogin
}],
items: [
new Ext.Panel({
bodyStyle: 'padding:30px;',
region: 'center',
layout: 'form',
items: [
new Ext.form.Label({
fieldLabel: '',
html: strMsg + 'Please enter your username and password below. <br /><br />'
}),
txtUserName,
txtPassword
],
buttons: [
loginButton,
{ text: 'Forgot Password' }
]
})

]
});

newLoginWindow.show();
txtUserName.focus(true, 10);
Username will focus for a split second and then loose focus....

Thanks for the help!

Condor
9 Jul 2009, 7:40 AM
Why not use:

var newLoginWindow = new Ext.Window({
...
defaultButton: txtUserName
});
newLoginWindow.show();

vivitron
9 Jul 2009, 7:49 AM
Wasn't aware of that option...

That works... interestingly, if I call txtPassword.focus(); it will focus only IF I have defaultButton set on the window. It appears that without defaultButton set, you cannot focus anything on the window.

Does this make sense?

bbg
28 Jul 2009, 10:57 PM
Yep, defaultButton breaks tabulation in the window. When I press tab button any element from the whole document car get focus. This is wrong behavior.

bbg
28 Jul 2009, 11:32 PM
I've found another solution. You should use defaultButton and override Ext.window.focus() function:


focus : function(){
// Firstly set focus on the window
this.focusEl.focus();

// and then to the defaultButton (if it was set and exists)
f = null;
db = this.defaultButton, t = typeof db;
if(t != 'undefined'){
if(t == 'number' && this.fbar){
f = this.fbar.items.get(db);
}else if(t == 'string'){
f = Ext.getCmp(db);
}else{
f = db;
}
}
if (f) {
f.focus.defer(10, f);
}
}

Animal
28 Jul 2009, 11:47 PM
This issue was because on show, a Window moves itself to the front of the Widow stack, and then focusses itself which stole focus from whatever else happened to have focus.

I think this issue has been resolved in the latest code in SVN, and it does not automatically focus itself when programmatically shown.