ExtJS 4.1 - 覆盖 Ext.LoadMask 的 css答案

【问题标题】：ExtJS 4.1 - Override css of Ext.LoadMaskExtJS 4.1 - 覆盖 Ext.LoadMask 的 css
【发布时间】：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();

感谢任何帮助。

【问题讨论】：

标签： javascript css extjs extjs4 loadmask

【解决方案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 而不是 maskCls

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

希望这会有所帮助。

【讨论】：