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

Posted 2023-02-26

【中文标题】ExtJS 3.0 中更通用的面板加载掩码

【英文标题】：Load mask for panel more generic in ExtJS 3.0

【发布时间】：2018-04-16 06:33:42

【问题描述】：

这里有很多面板，但我想使用函数为特定的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++;
,

【参考方案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')
                

            
        ]
    );
);