ExtJS 4.1 - 覆盖 Ext.LoadMask 的 css

Posted 2023-02-26

【中文标题】ExtJS 4.1 - 覆盖 Ext.LoadMask 的 css

【英文标题】：ExtJS 4.1 - Override css of Ext.LoadMask

【发布时间】：2013-12-30 08:52:29

【问题描述】：

我需要将Ext.LoadMask 的默认背景颜色从白色变为灰色。我怎样才能做到这一点？还添加了图像的屏幕截图和我用来加载蒙版的代码。

var feestore = this.getBillingFeePanelStoreStore();
        feestore.on(
            beforeload: this.beforeFeestoreLoad,
            scope: this
        );

beforeFeestoreLoad: function(store, operation, eOpts)
    var myMask = new Ext.LoadMask(Ext.getBody(), msg:"Please wait.... Your request is being processed");
    myMask.show();

感谢任何帮助。

【参考方案1】：

使用 'maskCls' 定义自己的样式，然后添加适当的 css

    var myMask = new Ext.LoadMask(Ext.getBody(), msg:"Please wait.... Your request is being processed", maskCls:'customLoadMask');

CSS:
    .customLoadMask 
        filter: alpha(opacity=70);
        opacity: .7;
        background: grey !important;
    

【讨论】：

感谢 newmount 的建议，但这不起作用。我没有看到默认的 cls 被覆盖。

不确定出了什么问题，但这里有一个可行的方法：fiddle.sencha.com/#fiddle/196

使用新的 Ext.LoadMask 创建掩码时... 'maskCls' 没有被应用...这里有一个解决方法：fiddle.sencha.com/#fiddle/2do

您能否更正这最后 3 行 // 不知何故添加 maskCls 不起作用，所以 var dom = Ext.dom.Query.select('.x-mask'); var el = Ext.get(dom[0]); el.addCls('customLoadMask');根据 sencha jsfiddle jslint

感谢 newmount，现在运行良好。

【参考方案2】：

以下在 extjs 4.2 上对我有用： msgCls 而不是 ma​​skCls

var loadingMask = new Ext.LoadMask(Ext.getBody(), 
msg:"Een moment geduld aub ...", msgCls:'msgClsCustomLoadMask');

CSS：

.msgClsCustomLoadMask
background-color: #FF0000;
border: solid 2px #A3BAD9;

.msgClsCustomLoadMask .x-mask-msg-inner
color: #000066;
font: normal 25px Times new Roman,helvetica,arial,verdana,sans-serif;

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.LoadMask-cfg-msgCls

希望这会有所帮助。