Add load event to Ext.net.Image

  1. #1

    Add load event to Ext.net.Image

    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 =).
  2. #2
    Hi,

    Ok, I will add it today/tomorrow
  3. #3
    any updates on this? thanks!
  4. #4
    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
    Founder
  5. #5
    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.
    Geoffrey McGill
    Founder
  6. #6
    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)
  7. #7
    Quote Originally Posted by vladimir View Post
    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>
    Attached Thumbnails Click image for larger version. 

Name:	images.png 
Views:	425 
Size:	61.2 KB 
ID:	1409  
  8. #8
    Hi,

    Fixed in SVN

Similar Threads

  1. [CLOSED] Load byte array jpg into a Ext:Image
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Jun 02, 2018, 5:19 PM
  2. [CLOSED] Load html in window to print an image.
    By stoque in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 03, 2011, 10:37 AM
  3. [CLOSED] Image complete event always fire when resetting src
    By jchau in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 28, 2010, 8:02 AM
  4. Replies: 3
    Last Post: Nov 06, 2009, 10:46 AM
  5. [CLOSED] PanelBase.Load hides Control.Load Event
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 22, 2009, 12:36 AM

Posting Permissions