CODEWITHSUNDEEP
extjscharts
salamey
salamey

Reputation: 3821

Extjs mask() with message

I am able to mask() then unmask() a chart before and after it's rendered with : chart.mask() then chart.unmask().

But I want to add a loading message while it's masked, how can I do it? I'm using Extjs 4.1 with MVC.

Upvotes: 0

Views: 1508

Answers (1)

rixo
rixo

Reputation: 25021

Ext.Component (from which chart inherits) and Ext.dom.Element both have a mask method. But Ext.dom.Element's one accepts a msg argument.

That means you can achieve what you want with this kind of code:

chart.el.mask('My message');

Now there are a couple more things to take into account.

The most important is to ensure that the element is defined before calling its mask method. In effect, due to possible load delays or render deferrings, it might happen that some events or methods are called on components that have been destroyed or not yet rendered.

The second thing is that with this method, you won't have the loading CSS class by default. You can pass it as the second argument to mask if you want it; the class is 'x-mask-loading'.

With all that, the code should rather look like this:

var maskEl = chart.getMaskTarget() // this one's marked as private... maybe we shouldn't use it
    || chart.getEl();
if (maskEl) {
    maskEl.mask("Loading...", Ext.baseCSSPrefix + 'mask-loading');
}

Unmask similarly. The check that the element still exists will be even more important there, because the chance that the component has been destroyed (e.g. window or tab closed) before the load is done is even greater.

Upvotes: 1

Related Questions