View Full Version : Not allowing focus at a readOnly field

31 Jul 2012, 12:27 AM
Currently if in a form, a field is marked as readOnly:true, then a user can focus at it though its value can not be modified.

This leads to an issue when user is navigating using tab key.

With tab key, user lands at a field which is marked as readOnly but can not modify it. Thus, what is wanted is that the user should by default be moved to the next field as in the case of disabled fields. Like, when a user is trying to focus a disabled field using tab key, then the cursor by default goes to the next allowed one, how to have the same behaviour for the readOnly fields?

The only issue with using disabled fields instead of readOnly is that the disabled fields don't get submitted to the server, which is unfortunately required.

Hence, could someone guide at how readOnly fields can be prevened from being focussed?

Thanks for any help in advance.
PS: ExtJs 4.1

31 Jul 2012, 4:20 AM
You can add tabIndex: -1 to the config for the field. Note that this won't stop a user from clicking directly in the field with their mouse, but it will skip the field via tabbing.

31 Jul 2012, 6:14 AM
Thanks for the post @friend.

The code works perfectly, but unfortunately, when we change the readOnly status of field using setReadOnly(true/false) then the tabIndex still stays as -1 and field is still inaccessible using keyboard.

I tried setting tabIndex as 0 for this and also deleting tabIndex when readOnly is set to false, but no luck.

Could you guide that after changing the status of a field to setReadOnly(false) how can we make it accessible using tabIndex?


31 Jul 2012, 6:52 AM
Perhaps a convert field (calculated) for display and then have the real field as hidden for submit?


31 Jul 2012, 7:09 AM
Thanks Scott. But could you please elaborate that what are you referring to through -

convert field (calculated) for display

31 Jul 2012, 7:22 AM
Here is the converted field:

This may work .. just thinking out loud ;)