ExtJS 4.1 - Override css of Ext.LoadMask

Question

I have a requirement to override the default background color of Ext.LoadMask from white to grey. How can I achieve this? Also adding the screenshot of the image and the code that I am using to load the mask.

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();

Any help is appreciated.

Answer 1

Use 'maskCls' to define your own style, then add appropriate 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;
    }

Answer 2

The following worked for me on extjs 4.2: msgCls instead of 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

Hope this helps.