Search code examples
javascriptcssextjsextjs4loadmask

ExtJS 4.1 - Override css of Ext.LoadMask

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.

My 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.

Solution

  • 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;
    }