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 =).

**vladsch** · 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.

**vladsch** · 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

Originally Posted by vladsch

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 vladsch! 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>

**vladsch** · Jul 23, 2010 2:24 PM

Hi,

Fixed in SVN

Thread: Add load event to Ext.net.Image

Thread Tools

Search Thread

Display

Add load event to Ext.net.Image