Apr 19, 2012, 6:06 PM
[CLOSED] Guage not rendering when created in a panel that is craeted dynamically
We are using the following guage in my project
http://jsgauge.googlecode.com/svn/tr...ple/gauge.html
below is the implementation of the guage in our EXT project.
excanvas.js and the gauge.js have been attached to the is thread. please rename the ext to .js. The guage renders propering in all the version of the browser .
However, in IE 7 and IE 8 the dynamic guage does not render does not render and the statically declared panels renders in all scenerio. How can this issue be fixed.
toolbox.js file
http://jsgauge.googlecode.com/svn/tr...ple/gauge.html
below is the implementation of the guage in our EXT project.
excanvas.js and the gauge.js have been attached to the is thread. please rename the ext to .js. The guage renders propering in all the version of the browser .
However, in IE 7 and IE 8 the dynamic guage does not render does not render and the statically declared panels renders in all scenerio. How can this issue be fixed.
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Dynamic>"%>
<%@ 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 id="Header" runat="server">
<title></title>
<meta content="NO-CACHE" http-equiv="CACHE-CONTROL" />
<!--[if IE]><script src="/Scripts/jsgauge-0.4.3/excanvas.js" type="text/javascript"></script><![endif]-->
<script src="/scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/Scripts/jsgauge-0.4.3/gauge.js" type="text/javascript"></script>
<script src="/Scripts/Toolbox.js" type="text/javascript"></script>
<ext:ResourcePlaceHolder runat="server" />
<%-- Override the default label seperator and set to ""--%>
<script type="text/javascript">
Ext.Component.prototype.labelSeparator = "";
</script>
</head>
<body>
<ext:ResourceManager runat="server">
</ext:ResourceManager>
<ext:Viewport runat="server" Layout="fit" IDMode="Explicit" >
<Items>
<ext:Panel runat="server">
<Items>
<ext:Panel runat="server">
<Content>
<canvas id="guage1" width="250" height="250"></canvas>
</Content>
<Listeners>
<AfterRender Handler=" new Gauge(document.getElementById('guage1'));"/>
</Listeners>
</ext:Panel>
</Items>
<Listeners>
<AfterRender Handler="Common.UnMask();ToolBox.AddDynamicPanelWithGuage(item)"/> <------------ this does not render in IE7 and IE 8 but renders in all other browsers including IE 9
</Listeners>
</ext:Panel>
</Items>
</ext:Viewport>
</body>
</html>toolbox.js file
ToolBox = {
AddDynamicPanelWithGuage: function (item) {
var panel = {
title: 'Guage',
html: '<canvas id="dynamic_guage" width="250" height="250"></canvas>',
border: false,
listeners: {
afterRender: function () {
new Gauge(document.getElementById('dynamic_guage'));
}
}
}
item.addAndDoLayout(panel);
}
}
Last edited by Daniil; Apr 20, 2012 at 10:04 AM.
Reason: [CLOSED]
