在ExtJS 3.0中更通用的面板的加载掩码

Question

这里有很多面板，但是我想使用一个函数为特定的item/panel添加加载蒙版。

之后，我将对该函数重新使用另一个panel但此处仅更改参数。

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

您可以在ShowLoadingMask()函数内部的视图中传递视图，并使用像这样在传递的视图上应用蒙版

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

在这个FIDDLE中 ，我使用ExtJS组件创建了一个演示。 我希望这会帮助/指导您达到要求。

代码片段

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')
                }

            }
        }]
    });
});