PDA

View Full Version : Window widget moves hard when crossing over an IFrame window



askwhy
10 Sep 2009, 3:36 AM
When draging an Ext.Window widget across(or within) an IFrame window, you will find it moves hard, while in other areas, it moves smoothly. This case can be imitated by runing the source code attached below.

could anyone explain why and provide a solution to improve it?

askwhy
10 Sep 2009, 3:41 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
<script src="lib/ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="lib/ext/ext-all.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var iFrmBasic = "";
var iFrmService = "";
var iFrmOrder = "";
//create window+Tab
function LoadTabContent(customerid, funcCode, callid) {

iFrmBasic = CreateFrame("basicfrm", "CustomerEdit.aspx?callID=" + callid + "&wd=" + customerid + "&funcCode=" + funcCode, 730, 435);
iFrmService = CreateFrame("Servicefrm", "ServiceEdit.aspx?cltid=" + customerid, 730, 435);
iFrmOrder = CreateFrame("Orderfrm", "OrderEdit.aspx?cltid=" + customerid, 730, 435);
var dialog = "Win" + customerid;
var dialogTag = "Tag" + customerid;
document.getElementById("newWin").innerHTML = "<div id='" + dialog + "'><div id='" + dialogTag + "'></div></div>";
document.getElementById("newWin2").innerHTML = "<div id='a'><div id='aa'></div></div>";
var tabs = new Ext.TabPanel({
el: dialogTag,
activeTab: 1,
width: 730,
height: 460,
resizeTabs: false // turn on tab resizing
});
tabs.add(
{
id: "basicTag",
title: "Basic Info",
iconCls: "tabs",
html: iFrmBasic,
closeble: false
}
);
tabs.add(
{
id: "serviceTag",
title: "Service Logs",
iconCls: "tabs",
html: iFrmService,
closeble: false
}
);
tabs.add(
{
id: "salesOrderTag",
title: "Order Logs",
iconCls: "tabs",
html: iFrmOrder,
closeble: false
}
);
var win = new Ext.Window({
contentEl: dialog,//"dialogWin",
width: 745,
height: 529,
title: "Main Window contains three IFrame components",
items: tabs,
buttons: [{
text: 'Close',
handler: function() {
win.hide();
}
}]
});
win.show();
var win2 = new Ext.Window({
contentEl: 'a',
width: 545,
height: 329,
title: "Another Window",
html:'This window moves hard when crossing the IFrame',
buttons: [{
text: 'Close',
handler: function() {
win.hide();
}
}]
});
win2.show();
}
function CreateFrame(id, url, w, h) {
var html = "";
html = "<iframe id=\"" + id + "\" src=\"" + url + "\" width=\"" + w + "px\" height=\"" + h + "px\" marginwidth=\"0\" marginheight=\"0\" frameborder=\"0\" style=\"overflow:auto\"></iframe>";
return html;
}
function test(pid) {
LoadTabContent(pid, "5555", "sdfsdfe333");
}
</script>
</head>
<body>
<span id="newWin"></span><br/><br/>
<span id="newWin2"></span>
<input type="button" id="LinkDialogWindow" value="Open Window" onclick="javascript:test(1569466);">
</body>
</html>