1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    1
    netemp is on a distinguished road

      0  

    Default Unanswered: Not allowing focus at a readOnly field

    Unanswered: Not allowing focus at a readOnly field


    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

  2. #2
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      1  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    1
    netemp is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,085
    Answers
    675
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Scott.

  5. #5
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    1
    netemp is on a distinguished road

      0  

    Default


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

    Quote Originally Posted by scottmartin View Post
    convert field (calculated) for display

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,085
    Answers
    675
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    This may work .. just thinking out loud

    Scott.