[CLOSED] Mask on adding / refreshing a sprite to a DrawComponent

[HansWapenaar]

Hi,

It there a way to set a mask when a sprite is added to a drawcomponent?
In a website I want a sprite to be filled with an image which is created on the fly. The image is used as a kind of background image for other sprites. The image is created in a handler.
Loading works fine but when the image becomes a bit more complex the creation takes more time. During this time I would like to show a mask.

           Dim sprite As Sprite = New Sprite
            sprite.SpriteID = "uniquename"
            sprite.Type = SpriteType.Image
            sprite.Width = 400
            sprite.Height = 400
            sprite.Src = "ImageHandler.ashx?test=123456"           
            drawComponentImage.Add(sprite)
            sprite.Show(True)

I cannot find any mask setting with a DrawComponent or a Sprite. Do you have a sugestion?

Hans

[Vladimir]

Hi

Any element can be masked.
You can show the mask this way

App.DrawComponent1.el.mask();

and hide mask

App.DrawComponent1.el.unmask();

Please see
http://docs-origin.sencha.com/extjs/...nt-method-mask
http://docs-origin.sencha.com/extjs/...-method-unmask

[HansWapenaar]

Hi,

Adding the mask works.

ExtX.AddScript("App.drawImage.el.mask('waiting for image');")

What also works:

drawImage.SetLoading(true)

But where to place the unmask?

Ik tried a listener on the drawcomponent, but without any result.

<Listeners><AfterRender Handler="App.drawImage.el.unmask();"></AfterRender></Listeners>

or:

<Listeners><AfterRender Handler="App.drawMap.setLoading(false);"></AfterRender></Listeners>

Any suggestions?

Thanks, Hans

[Vladimir]

Hi

Well, you need to hide mask when response from 'ImageHandler.ashx?test=123456' will be received but Ext.Net has no such events because request to that handler is initiated by browser (not Ext.Net)

I can suggest the following workaround
- use hidden Image and set ImageUrl equals to sprite image url
- set MonitorComplete="true"
- in Compete event handler of the image you can hide mask and set sprite href, i guess that image will be cached by browser and will not be requested again

Ext.get('spriteId').dom.setAttributeNS('http://www.w3.org/1999/xlink','href', "ImageHandler.ashx?test=123456");

I did not test it but it should work

[HansWapenaar]

Hi Vladimir,

That is an interesting workaround.
I've got it working. Very good. I get the idea that indeed the cache is doing its work.

Only issue is that dom.setAttributeNS is not working in IE8, so I will have to look for an alternative for the IE8 users.

Thanks,

Hans

[Vladimir]

Please use the following code, it should work anywhere

App.DrawComponent1.get('SpriteID').setAttributes({src: 'myImage.png'}, true);

[HansWapenaar]

Thanks, That works fine, also in IE8.

Hans