View Full Version : ExtJs 4.2.1: Two Load masks are seen when a panel is loading

4 Feb 2014, 5:23 AM

I was using ExtJS 4.1.3 and I am now trying to migrate to 4.2.1. We use "Standards compliance mode" for HTML.
With 4.2.1, I am seeing 2 load masks when any panel is loading.(See attached)

I debugged this further and here's what I found.
When a load mask is rendered, there are 3 divs created:

<div class="x-mask-msg x-mask-loading" id="ext-gen1503" style="right: auto; left: 249px; top: 212px;">
<div class="x-mask-msg-inner">
<div class="x-mask-msg-text">
Loading, please wait ...</div>

The CSS defined for LoadMask is:

.x-mask-msg div {
padding: 5px 10px 5px 25px;
background-image: url('../extjs/resources/themes/images/gray/grid/loading.gif');
background-repeat: no-repeat;
background-position: 5px center;
cursor: wait;
border: 1px solid #b3b3b3;
background-color: #eeeeee;
color: #222222;
font: normal 12px "Lucida Grande", Tahoma, Helvetica, Arial, sans-serif;

If I understand this correctly, the css is applied to all the nested divs shown above and consequently there are 2 load masks shown.
In 4.1.3, there was only a single nested 'div' element, due to which this was not an issue.

<div class="x-mask-msg x-mask-loading" id="ext-gen1503" style="right: auto; left: 249px; top: 212px;"><div >
Loading, please wait ...</div>

Is this a bug? Or do I need to do something different with 4.2.1?

Thanks in advance.


5 Feb 2014, 1:29 AM
try using maskCls (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.LoadMask-cfg-maskCls) to add custom css styles for loadmask., it can be defined while setLoading

msg: "Loading, please wait..",
maskCls: "customLoadMask"

5 Feb 2014, 4:59 AM
You need to upgrade your CSS file. That rule isn't in the 4.2.1 CSS.