PDA

View Full Version : Add load event to Ext.net.Image



jchau
Jul 19, 2010, 1:27 PM
It would be awesome if you guys can add a load event to Ext.net.Image. I have an image that hits a httphandler that generates a graph. This can sometimes take a while so I would like to mask the image's container while the image is loading. Currently, I have to manually add masking code every time I call setImageUrl. It would be easier if I can just listen to a load event before the url is set. I am already listening to the complete event to unmask.

Or if you guys add a Mask config to Ext.net.Image that will do the masking and unmasking internally, that would be even better =).

Vladimir
Jul 19, 2010, 2:06 PM
Hi,

Ok, I will add it today/tomorrow

jchau
Jul 21, 2010, 3:39 PM
any updates on this? thanks!

geoffrey.mcgill
Jul 21, 2010, 9:51 PM
Hi Jacky,

The <Complete> Listener and DirectEvent has been added. Please update from SVN.

Example


<ext:Image ID="Image1" runat="server" ImageUrl="http://forums.ext.net/image.php?u=52&dateline=1278319354">
<Listeners>
<Complete Handler="console.log('Complete', arguments);" />
</Listeners>
</ext:Image>

Hope this helps.

geoffrey.mcgill
Jul 21, 2010, 9:57 PM
oops... maybe I was mistaken.

A new <BeforeLoad> Listener and DirectEvent will be added shortly, as well as new LoadMask functionality.

We'll post and update once complete and committed to SVN.

Vladimir
Jul 22, 2010, 9:37 AM
Hi,

We have added the following functionality to the Image
- BeforeLoad event
- LoadMask property (automatic masking can be a problem because html image cannot have child element therefore we cannot mask an image directly, we have tested LoadMask with several cases and appears it works correctly but if you find a problem test case then please post it)

jchau
Jul 22, 2010, 3:44 PM
Hi,

We have added the following functionality to the Image
- BeforeLoad event
- LoadMask property (automatic masking can be a problem because html image cannot have child element therefore we cannot mask an image directly, we have tested LoadMask with several cases and appears it works correctly but if you find a problem test case then please post it)

Thanks vladimir! The BeforeLoad event works great. I also tried the LoadMask property but it doesn't fit my requirements. I have an image inside a panel. On a button click, I load a bigger image with new url but the panel doesn't resize itself. If I do custom masking using BeforeLoad event, the panel resizes correctly. Not a big deal as I am able to accomplish what I did using BeforeLoad, but just wanted to point it out.

Example - you can use any images for ChartBig.bmp and ChartSmall.bmp as long as they are different size. I also attached a screenshot after I clicked hte Load New Image buttons.



<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ScriptMode="Debug" runat="server">
</ext:ResourceManager>
<ext:Panel runat="server" Title="Image With Built-in Load Mask">
<Buttons>
<ext:Button ID="Button1" runat="server" Text="Load New Image">
<Listeners>
<Click Handler="imgOne.setImageUrl('ChartBig.bmp')" />
</Listeners>
</ext:Button>
</Buttons>
<Items>
<ext:Image runat="server" ID="imgOne" ImageUrl="ChartSmall.bmp">
<LoadMask ShowMask="true" />
</ext:Image>
</Items>
</ext:Panel>
<ext:Panel ID="Panel1" runat="server" Title="Image With Custom Load Mask">
<Buttons>
<ext:Button ID="Button2" runat="server" Text="Load New Image">
<Listeners>
<Click Handler="imgTwo.setImageUrl('ChartBig.bmp')" />
</Listeners>
</ext:Button>
</Buttons>
<Items>
<ext:Image runat="server" ID="imgTwo" ImageUrl="ChartSmall.bmp" MonitorComplete="true">
<Listeners>
<BeforeLoad Handler="if (Panel1.rendered) {Panel1.getEl().mask('loading');}" />
<Complete Handler="Panel1.getEl().unmask();" />
</Listeners>
</ext:Image>
</Items>
</ext:Panel>
</form>
</body>
</html>

Vladimir
Jul 23, 2010, 2:24 PM
Hi,

Fixed in SVN