Sencha ExtJS: How do I prevent the cursor from leaving the current position in a phone number field upon edit?

Question

Cursor automatically moves to the end of the phone number after 1 backspace move, it should remain in parentheses because the user could just want to edit the area code. (CODE AND IMAGES INCLUDED...scratch that, don't have 10 rep to post pictures, :/)

Here is the code for the text field (the button only; if more context is needed, please advise)

{
    name: 'ContPhone',
    itemId: 'ContPhone',
    fieldLabel: I18N.Messages.STR_PHONE,
    maxLength: 25,
    width: 370,
    labelCls: 'formFieldLabel',
    enforceMaxLength: true,
    plugins: Ext.create('Silver.ux.plugin.FormatPhoneNumber'),
    vtype: 'phone'
},

This is the plugin/extension info. I'm guessing the onChange() function is the culprit. Please guide me in the direction to remedy this. The complete solution would mean, that if I delete any digit from the field before saving, the cursor position remains intact.

Ext.define('Silver.ux.plugin.FormatPhoneNumber', {
    extend: 'Ext.form.TextField',

    init: function (c) {
        // Format a phone number
        Ext.apply(Ext.util.Format, {
            phoneNumber: function (value) {
                var phoneNumber = value.replace(/\./g, '').replace(/-/g, '').replace(/[^0-9]/g, '');
                //US phone numbers
                if (phoneNumber !== '' && phoneNumber.length === 10 && UI_CULTURE === 'en-US') {
                    return '(' + phoneNumber.substr(0, 3) + ') ' + phoneNumber.substr(3, 3) + '-' + phoneNumber.substr(6, 4);
                } else {
                    return value;
                }
            }
        });

        // Validate a phone number
        Ext.apply(Ext.form.VTypes, {
            'phoneText': (UI_CULTURE === 'en-US' ?
                'Not a valid phone number. Must be in the format (555) 555-5555.' :
                'Not a valid phone number. Must be a number 0-9.'),
            'phoneMask': /[\-\+0-9\(\)\s\.Ext]/,
            'phoneRe': (UI_CULTURE === 'en-US' ?
                /^(\({1}[0-9]{3}\){1}\s{1})([0-9]{3}[\-]{1}[0-9]{4})$|^(((\+44)? ?(\(0\))? ?)|(0))( ?[0-9]{3,4}){3}$|^Ext\. [0-9]+$/ :
                /^[0-9\s]+$/),
            'phone': function (v) {
                return this.phoneRe.test(v);
            }
        });

        c.on('change', 'onChange', this);
    },

    onChange: function (c) {
        c.setValue(Ext.util.Format.phoneNumber(c.getValue()));
    }
}); 

Answer 1

I have figured it out. The problem was fixed by deleting this segment:

onChange:  function (c) {
    c.setValue(Ext.util.Format.phoneNumber(c.getValue()));
}

The field still validates the number until it matches the format criteria. Cannot save until it matches. :D