CODEWITHSUNDEEP
formsextjsfieldreadonly
netemp
netemp

Reputation: 4185

How to disallow focus at a readOnly field

We have a form with few fields marked as readOnly.

The issue is that the user is able to focus or navigate to these readOnly fields using mouse or keyboard tab, and we want to disallow this.

One way of not allowing this is to mark all such fields as 'disabled'. But when marked disabled, then though fields can not be focussed, but then these disabled fields also do not get submitted to the server which is not what is expected.

Thus, how can we prevent a focus at readOnly fields?

PS: The reason behind disallowing focus at readOnly fields is to provide better navigation through keyboards, so that by using tab key user navigates or jumps across only those fields which he can edit and all readOnly fields get ignored.

Upvotes: 3

Views: 5291

Answers (2)

Alex Tokarev
Alex Tokarev

Reputation: 4861

Just override getSubmitData method and assign some other property to let overridden method know you want to submit regardless (say, forceSubmit):

Ext.define('My.form.Field', {
    override: 'Ext.form.field.Field',

    getSubmitData: function() {
        var me   = this,
            data = null;

        if ( me.disabled && me.readOnly && me.forceSubmit ) {
            data = {};
            data[me.getName()] = '' + me.getValue();
        }
        else {
            return me.callParent();
        }

        return data;
    }
});

Then you can require this class in your code and set the fields you need to be disabled, readOnly and have forceSubmit:

my field = new Ext.form.field.Text({
    disabled:    true,
    readOnly:    true,
    forceSubmit: true,

    value: 'foo'
});

That should do the trick.

Upvotes: 0

gunnx
gunnx

Reputation: 1219

You could add a listeners to the base Field class that listens for focus events then if the field is readOnly to focus the next component.

listeners: {
    focus: function(field)
    {                       
        if (field.readOnly)
        {
            field.nextSibling().focus();
        }
    }
}

Upvotes: 1

Related Questions