PDA

View Full Version : Not able to focus after onblur event on text field on IE 7 & 8



DSKK
18 Jun 2012, 11:49 AM
In the onblur function of a field, I am setting the focus on another text field.
This focus is not working correctly in IE7 & 8.
Please help, I am using the following to set the focus:

Ext.getCmp('packing_stn').focus(true);

I tried delaying the focus to the field both by using set timeout function and delay in focus function (that's the only solution I could find on internet) but it doesn't work. Please help! I have been breaking my head over this for past 2 weeks and it is impacting my deliverables.

scottmartin
18 Jun 2012, 1:00 PM
See if this will work for you:



Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,

// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},

// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
itemId: 'firstname',
listeners: {
blur: function(field) {
var form = field.up('form');
form.down('#middlename').focus(true);
}
}
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Middle Name',
name: 'middle',
itemId: 'middlename'
}],

// Reset and Submit buttons
buttons: [{
text: 'Submit',
formBind: true, //only enabled once the form is valid
disabled: true
}],
renderTo: Ext.getBody(),

listeners: {
afterlayout: function(form) {
form.down('#firstname').focus(true);

}
}
});​


Scott.

DSKK
19 Jun 2012, 9:44 AM
Thanks for the reply Scott.
In the following statement:

var form = field.up('form')
Where is ID form coming from? Is it an ID of form panel?

scottmartin
19 Jun 2012, 9:50 AM
If is grabbing the xtype of the parent of button. If you wanted to be more specific, you could assign an itemId to the form and then then use ('#formItemId') .. named instead of xtype

In a real world app, you would want to narrow it down. Since I knew I just had 1 form, I just used that.

Scott.

DSKK
19 Jun 2012, 11:24 AM
Scott,

I tried the way you suggested but it did not work.
My field is inside a panel, and I want the focus to stay in the field if validation fails. I used following code, it did not work. The focus still went to next field:

var form1=Ext.get('packageID').up('#leftPanel');
form1.down('#packageID').focus(true);

scottmartin
19 Jun 2012, 11:50 AM
Did you mean to use Ext.getCmp('packageID')?

I would suggest not using id at all. getCmp is not a recommend approach and hard id's are frowned upon as well.

if your panel has a parent container, your could use parent.getComponent('#mypanel')

Modified:


Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,

itemId: 'mypanel',

layout: 'anchor',
defaults: {
anchor: '100%'
},

// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
itemId: 'firstname',
listeners: {
blur: function(field) {
var form = field.up('form');
form.down('#middlename').focus(true);
}
}
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Middle Name',
name: 'middle',
itemId: 'middlename'
}],

// Reset and Submit buttons
buttons: [
{
text: 'Submit',
formBind: true, //only enabled once the form is valid
disabled: true
}],
renderTo: Ext.getBody(),

listeners: {
afterlayout: function(form) { // you already have access to the form; no need to create new var
form.down('#firstname').focus(true);
}
}

});

Ext.create('Ext.Button', {
text: 'Click me now',
renderTo: Ext.getBody(),
handler: function(btn) {
var panel = Ext.ComponentQuery.query('#mypanel')[0]; // creates array of panel
panel.down('#firstname').focus(true);
}
});


Scott.

DSKK
19 Jun 2012, 12:14 PM
Scott,

I tried the way you suggested, but it has not resolved the issue.
I have noticed that focus is not working only if it is called onblur function.
I have set the focus to true so it does highlight the field that needs to be focussed, but the focus doesn't stay on the field and it goes to next field.
In IE 6, this code runs fine, it doesn't work on IE 7 & 8.
Following code is called onblur of package ID field:

function getPackageID(field)
{
var packageID=Ext.getCmp('packageID').getValue();
if(packageID!='' )
{
if (packageID.substr(0,3)!='HSN')
{
var form1=field.up('#packageIDPanel');
form1.down('#packageID').focus(true);
}
}
}

scottmartin
19 Jun 2012, 12:21 PM
Please create a small test case or modify the sample I provided to display the problem you are having as I do not have complete picture of what you are trying to access.

Scott.

DSKK
19 Jun 2012, 12:34 PM
I changed my code as per your example. I am trying to change focus in blur function of package ID field which works fine on IE 6 but doesn't work on IE 7 & 8.



Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
itemId: 'mypanel',
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'Product ID',
name: 'ProductID',
itemId: 'ProductID',
listeners: {
blur: function(field) {
IF(field.getValue().substr(0,3)!='ABC')
{
//Keep the focus in this field- This is not working
field.focus(true);
}
else
{
//Shift the focus to next field. This is not working too
Ext.getCmp('PackageID').focus(true);
}
}
}
},{
fieldLabel: 'Product ID',
name: 'PackageID',
itemId:'PackageID'
}]
});


Scott.

scottmartin
19 Jun 2012, 12:59 PM
See if this will work for you



Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
itemId: 'mypanel',
layout: 'anchor',
renderTo: Ext.getBody(),
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [
{
fieldLabel: 'Product ID',
name: 'ProductID',
itemId: 'productid',
listeners: {
blur: function(field) {
if (field.getValue().substr(0, 3) != 'ABC') {
field.focus(true);
}
else {
var form = field.up('#mypanel');
form.down('#testid').focus(true);
}
}
}
},
{
fieldLabel: 'Package ID',
name: 'PackageID',
itemId: 'packageid'
},
{
fieldLabel: 'Test ID',
name: 'TestID',
itemId: 'testid'
}
]
});​


Scott.

DSKK
20 Jun 2012, 9:58 AM
This worked on IE 6 but did not work on IE 7 & 8.
I am not sure what the problem is.

scottmartin
20 Jun 2012, 10:36 AM
My latest example tested fine on IE7 and IE8

3639036391

Regards,
Scott.

DSKK
20 Jun 2012, 11:15 AM
Is there any other way to focus?

parkere
26 Jun 2012, 11:15 AM
The problem only occurs when trying to change the focus from the blur event of the last enabled field on the form. (No buttons after it or anything else.) When you tab out of the last enabled field on the form, the focus goes to the address bar. Even though you issue the command to change the focus back to the field, the cursor gets stuck in address bar.

I was able to create a workaround by creating a text field with width 0 as the last field on the form. Since this field has 0 width, it isn't visible and doesn't affect the functionality of the form. With this field in place, tabbing from the last field on the form would go to the 0-width text field instead of the address bar, and now the blur event is able to set the focus back to the field that fired the blur event.