Load mask for panel more generic in ExtJS 3.0

Question

Here has many panels, but I want to add a loading mask for a specific item/panel using a function.

After that I will reuse that function for another panel but only parameter will be change here.

Dysfunctional(url, postData, scope, successcallback,
    callerFunctionName, responseType, httpMethod, failurecallback) {
    Util.ShowLoadingMask();

    if (!this.SessionExists()) {
        return;
    }

}
ShowLoadingMask: function() {
    if (Util.ajaxCount == 0) {
        new Ext.LoadMask(Ext.getBody(), {
            msg: 'Please wait...'
        }).show();
    }
    Util.ajaxCount++;
},

Answer 1

You can pass you view in your view inside of ShowLoadingMask() function and use to apply the mask on that passed view like this

function ShowLoadingMask(view) {
    view.LoadMask = new Ext.LoadMask(view.el, {
        msg: 'Please wait...'
    }).show();
}

In this FIDDLE, I have created a demo using ExtJS Components. I hope this will help/guide you to achieve your requirement.

CODE SNIPPET

Ext.onReady(function() {

    function ShowLoadingMask(view) {
        view.LoadMask = new Ext.LoadMask(view.el, {
            msg: 'Please wait...'
        }).show();
    }

    function hideLoadingMask(view) {
        view.el.unmask()
    }

    function createForm() {
        return new Ext.FormPanel({
            frame: true,
            title: 'Load Mask Example',
            bodyStyle: 'padding:10px;',
            defaults: {
                xtype: 'textfield',
                anchor: '100%',
            },
            items: [{
                fieldLabel: 'A'
            }, {
                fieldLabel: 'B'
            }, {
                fieldLabel: 'C'
            }, {
                xtype: 'combo',
                fieldLabel: 'Combo 1',
                store: new Ext.data.ArrayStore({
                    fields: ['text', 'value'],
                    data: [{
                        abbr: 'yes',
                        state: 'NO'
                    }]
                }),
                displayField: 'text',
                valueField: 'text',
                typeAhead: true,
                queryMode: 'local'
            }, {
                xtype: 'combo',
                fieldLabel: 'Combo 2',
                store: new Ext.data.ArrayStore({
                    fields: ['text', 'value'],
                    data: [{
                        abbr: 'yes',
                        state: 'NO'
                    }]
                }),
                displayField: 'text',
                valueField: 'text',
                typeAhead: true,
                queryMode: 'local'
            }, {
                xtype: 'datefield',
                fieldLabel: 'date 1'
            }, {
                xtype: 'datefield',
                fieldLabel: 'date 2'
            }],

            buttons: [{
                text: 'Save'
            }, {
                text: 'Cancel'
            }]
        });
    }
    var panel = new Ext.Panel({

        id: 'demopanel',

        renderTo: Ext.getBody(),

        items: [createForm(), createForm(), createForm()],

        tbar: [{
            text: 'Show Mask on All Form',
            handler: function(btn) {
                if (btn.getText() == 'Show Mask on All Form') {
                    Ext.getCmp('demopanel').items.items.forEach(function(item) {
                        ShowLoadingMask(item);
                    });
                    btn.setText('Hide Mask on All Form')
                } else {
                    Ext.getCmp('demopanel').items.items.forEach(function(item) {
                        hideLoadingMask(item);
                    });
                    btn.setText('Show Mask on All Form')
                }

            }
        }]
    });
});