Originally Posted by
vladimir
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>