PDA

View Full Version : Ext.MessageBox.alert pop-up goes under SIlverlight Deepzoom plug-in



fullington
1 Jan 2011, 9:24 PM
Hi, I need some help in making any Ext 3.3.1 js window or dialog components to appear completely over a MS Silverlight plug-in. My Ext JS forms and alerts were all ok until I added a Silverlight Deepzoom Image plug-in into my html page. The message box text is appearing but the buttons, borders and title bar goes underneath it. Already tried setting z-index but to no help. Any advices or tips will be very much appreciated. I'm just new to Ext JS api btw. Thanks. Attached herewith is a screenshot as well as my codes for testing:



<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Silverlight Project Test Page </title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="scripts/ext-3.3.1/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="scripts/ext-3.3.1/ext-all.js"></script>
<!-- Theme includes -->
<link rel="stylesheet" type="text/css" title="access" href="css/xtheme-access.css" />
<script type="text/javascript" src="scripts/styleswitcher.js"></script>
<style type="text/css">
#silverlightControlHost {
height: 100%;
}
</style>
<script type="text/javascript">
function onSilverlightError(sender, args)
{
var appSource = "";
if (sender != null && sender != 0)
{
appSource = sender.getHost().Source;
}
var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;

var errMsg = "Unhandled Error in Silverlight 2 Application " + appSource + "\n";

errMsg += "Code: " + iErrorCode + " \n";
errMsg += "Category: " + errorType + " \n";
errMsg += "Message: " + args.ErrorMessage + " \n";

if (errorType == "ParserError")
{
errMsg += "File: " + args.xamlFile + " \n";
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
else if (errorType == "RuntimeError")
{
if (args.lineNumber != 0)
{
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
errMsg += "MethodName: " + args.methodName + " \n";
}

throw new Error(errMsg);
}

</script>
</head>
<body>
<!-- Runtime errors from Silverlight will be displayed here.
This will contain debugging information and should be removed or hidden when debugging is completed -->
<div>
<input type="button" value="Click Me" onclick="Ext.MessageBox.alert('Status', 'Debugging why messagebox is appearing underneath silverlight plug-in object.');"/>
</div>
<div id='errorLocation' style="font-size: small;color: Gray;"></div>
<div id="slPluginHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="800" height="2250">
<param name="minRuntimeVersion" value="3.0.40307.0" />
<param name="autoUpgrade" value="false" />
<param name="source" value="Default.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="initParams" value="adFile=GeneratedImages" />

<a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
</a>
</object>
<div style='visibility:hidden;height:0;width:0;border:0px'></div>
</div>
</body>
</html>