Ext.LoadMask lets TextField to be edited. How to avoid it?

Question

After applying a LoadMask, a textfield is still editable (although masked).

Code snippet in 3.4.0:

var enterPressedCounter=0; var btn = new Ext.Button({
     text: 'Unmask it',
     handler: function(){
         if(form.mask) form.mask.hide();
     } }); 

var textField= new Ext.form.TextField({
    fieldLabel: 'Text field',
    emptyText: 'Please enter a text and press enter',
    width: 230,
    listeners: {
        specialkey: function(field, e){
            if (e.getKey() == e.ENTER) {
                enterPressedCounter++;
                if(enterPressedCounter % 2 == 1){
                    form.mask= new Ext.LoadMask(form.el,{ msg:
                        'Now continue typing...'});
                    form.mask.show();
                }else{
                    btn.handler();
                }
            }
        }
    }
});

var form = new Ext.FormPanel({        
    frame:true,
    title: 'Load mask with text',
    bodyStyle:'padding:5px 5px 0',
    width: 500,     height: 150,        
    items: textField,
    mask: null,
    buttons: [btn] 
 });

form.render(document.body);

How can I fix this without side effects?

See also:

• code snippet in Ext 5.1.0.107
• code snippet in 4.2 (you may need to switch ext version)
• Sencha forum