ExtJS input masking and formatting

SCSS

body {
    background-color: #f6f9fc;
    color: #32465a;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 24px;
    margin: 0;
    padding: 16px;
}

.x-form-text {
    padding: 8px;
    min-width: 200px;
}

JavaScript

var format = function (value) {
    var numericValue = parseInt((value || '').replace(/-/g, ''), 10);
    var result = '' + isNaN(numericValue) ? '' : numericValue;
    
    [2, 6].forEach(function (n) {
    	if (result.length > n) {
        	result = result.substring(0, n) + '-' + result.substring(n);
	    }
    });
    
    return result;
};

// IRL you might write this as a plugin to the textfield.
Ext.widget({
	xtype: 'textfield',
    renderTo: Ext.getBody(),
    maskRe: /[0-9]{6}/,
    emptyText: '00-000-000',
    enforceMaxLength: true,
    maxLength: 10,
    inputAttrTpl: 'inputmode="numeric" pattern="^\d{2}-\d{3}-\d{3}$"',
    listeners: {
        change: function (field, newValue) {
			var formattedValue = format(newValue);
            
            if (formattedValue !== newValue) {
                field.setRawValue(formattedValue);
            }
        }
    }
});