ExtJS loadMask on the form is not working?

Question

I have a form and I am trying to apply mask when submit button is clicked but somehow mask is not displaying on form.

var objMask = new Ext.LoadMask({
            target: target,
            msg: 'test',
            //hideMode: 'display',
            listeners: {
                beforedestroy: function (lmask) {
                    //this.hide();
                },
                hide: function (lmask) {
                    //this.hide();
                }
            }
        });
        

It is working in panel but in form, we are not getting anything.

Thanks in advance.

Answer 1

You need to call show method on Ext.LoadMask instance.

Example on https://fiddle.sencha.com/#view/editor&fiddle/3cuq

let target = Ext.create("Ext.form.Panel", {
    renderTo: Ext.getBody(),
    width: 400,
    height: 400
});

var objMask = new Ext.LoadMask({
    target: target,
    msg: 'test',
    //hideMode: 'display',
    listeners: {
        beforedestroy: function (lmask) {
            //this.hide();
        },
        hide: function (lmask) {
            //this.hide();
        }
    }
});

objMask.show();