[CLOSED] [#449] Loading Mask

[MarginPoint]

Hi Team,
I want to display the loading mask without any Loading msg, I just want to show a spinner.
Can you plaese help on this..

[geoffrey.mcgill]

Hello,

I think we need to do a little work on the api. The simplest work-around I was able to find was setting Msg=" ".

Example

<EventMask ShowMask="true" Msg="&nbsp;" />

We will discuss making some changes. Setting just Msg="" will work after we revise.

Currently you can set Msg=" ", but the height of the mask element is not maintained. We will fix.

[MarginPoint]

Thank you.
Its working. But how to change that spinning image i wanted to use tha attaced image

[Daniil]

Here you are.

<style type="text/css">
    .my-mask div {
        background-image: url(resources/images/test.png);
    }
</style>

<EventMask ShowMask="true" MsgCls="x-mask-loading my-mask" />

[MarginPoint]

Hi Daniil,

We are using js method called ShowMask which is used through out our application to show the mask.
current implementation is like this

ShowMask: function (message) {

        var mask = new Ext.LoadMask(Ext.GLOBAL_STORE.IndexPageViewPort.el, { msg: ' ', el: Ext.GLOBAL_STORE.IndexPageViewPort.el });
        mask.show();
    }

I wanted a one place change which reflects through out the app.

Can you please share a detailed example with explanation it will be very helpful

[Daniil]

You can try to override the default CSS rule.

<style type="text/css">
    .x-mask-loading div {
        background-image: url(my-mask-image.gif);
    }
</style>

[MarginPoint]

You can try to override the default CSS rule.

<style type="text/css">
    .x-mask-loading div {
        background-image: url(my-mask-image.gif);
    }
</style>

Hi Daniil its coming like this
I dont want border. it should come like this

[Daniil]

Then you should override another CSS rules.

.x-mask-loading {
    border-width: 0px;
    padding: 0px;
    background: transparent;
}

.x-mask-loading div {
    background-color: transparent;
    background-image: url(resources/images/test.png); 
    border-width: 0px;   
    height: 32px;
    width: 32px;    
}

This might help to work on such issues.
CSS Change TabPanel Header Color - Ext.NET on Vimeo

[MarginPoint]

Then you should override another CSS rules.

.x-mask-loading {
    border-width: 0px;
    padding: 0px;
    background: transparent;
}

.x-mask-loading div {
    background-color: transparent;
    background-image: url(resources/images/test.png); 
    border-width: 0px;   
    height: 32px;
    width: 32px;    
}

This might help to work on such issues.
CSS Change TabPanel Header Color - Ext.NET on Vimeo

Thank you very much Daniil, its working as expected :)

[Daniil]

We will discuss making some changes. Setting just Msg="" will work after we revise.

After the revision #5722, a mask with Msg="" should be rendered good. The change will go to the v2.5.1 release.

As for Ext.NET v1, we are not going to change it there.