PDA

View Full Version : Not Able set the focus back to the field while firing OnBlur Event in firefox



raghavan0208
12 Jan 2012, 6:09 AM
Ext version tested:


Ext 4.0.7


Browser versions tested against:


Not Working for any version of Firefox
Working For all version of Chrome , IE


Description:


Firing OnBlur Event in Firefox Causes Problem.


Steps to reproduce the problem:


Create Ext.form.field.Text and give "Blur" listener after that write a function for some validation and try to set focus for the field if the validation fails.


The result that was expected:


After validation the focus should return to the corresponding field(Object) if the validation fails.


The result that occurs instead:


The focus is going to the nextfield eventhough validation fails and even after explicitly setting the focus by document.getElementById(object.inputId).focus()


Test Case:


<html>
<head>
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>






<script>
Ext.onReady(function(){


Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
id:'fld1',
inputId:'nameFld',
fieldLabel: 'Name',
listeners:{
blur:function(obj){

navigationOnTab(obj);

}

}
}, {
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email Address',
inputId:'nameFld',
id:'fld2',
listeners:{
blur:function(obj){

navigationOnTab(obj);

}


}

},{
xtype: 'textfield',
name: 'add',
fieldLabel: 'Address',
inputId:'addrFld',
id:'fld3',
listeners:{
blur:function(obj){

navigationOnTab(obj);

}


}

},{
xtype: 'textfield',
name: 'addr1',
fieldLabel: 'Address1',
inputId:'addr1Fld',
id:'fld4',
listeners:{
blur:function(obj){

navigationOnTab(obj);

}


}

},{
xtype: 'textfield',
name: 'addr2',
fieldLabel: 'Address2',
inputId:'addr2Fld',
id:'fld5',
listeners:{
blur:function(obj){

navigationOnTab(obj);

}


}

}]
});


function navigationOnTab(obj){


if(obj.value===undefined || obj.value===null || obj.value=="" ){



document.getElementById(obj.inputId).focus();


}


}
});
</script>
</body>
</html>

hendricd
12 Jan 2012, 7:12 AM
@raghavan0208--

Have you tried:



obj.focus(false, true);


The last argument (delay = true) would ensure the focus attempt was not made before the blur event chain had completed.

raghavan0208
17 Jan 2012, 11:16 PM
I have tried your suggestion but the focus issue have not been resolved.


Thanks for the reply, if you find any other solution please tell me


Thanks,
raghavan0208

hendricd
18 Jan 2012, 4:29 AM
I have tried your suggestion but the focus issue have not been resolved.


Thanks for the reply, if you find any other solution please tell me


Thanks,
raghavan0208

@raghavan--

The default delay value for focus (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.form.field.Text) is 10ms. Adjust it upwards until you find a delay that suites your validation workload:


obj.focus(false, 300);

raghavan0208
20 Jan 2012, 4:32 AM
This time also no luck .
I have tried this suggestion, Are you suggesting the solution or is it working for you by reproducing the mentioned scenario.



Thanks,
raghavan0208

hendricd
20 Jan 2012, 5:11 AM
A suggestion at this point.

I've had good luck with the same pattern in scenarios where you are forcing one DOM event from within the handler of another.

Deferring the final action permits the initiator time to complete.

Animal
21 Jan 2012, 9:08 AM
Try this: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.field.Text-cfg-validator