Not allowing focus at a readOnly field

[netemp]

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

[friend]

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.

[netemp]

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?

Thanks.

[scottmartin]

Perhaps a convert field (calculated) for display and then have the real field as hidden for submit?

Scott.

[netemp]

Thanks Scott. But could you please elaborate that what are you referring to through -


convert field (calculated) for display

[scottmartin]

Here is the converted field:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Field-cfg-convert

This may work .. just thinking out loud ;)

Scott.