Oct 16, 2018, 1:34 PM
Moving Component not updating Coordinates
Hello,
I am using the Ext.Net example https://examples4.ext.net/#/Keys/KeyNav/Basic/ and i have modified the page to show coordinates with the markup shown below. When i move the window, the x and y coordinates do not get updated. How can i get the x and y coordinates to update when moved?
I am using the Ext.Net example https://examples4.ext.net/#/Keys/KeyNav/Basic/ and i have modified the page to show coordinates with the markup shown below. When i move the window, the x and y coordinates do not get updated. How can i get the x and y coordinates to update when moved?
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>KeyNav - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script>
var isCenter = true;
var showPosition = function ()
{
var oWindow = Ext.getCmp("Window1");
var oLabel = Ext.getCmp("LabelPosition");
oLabel.setText
("extX=" + oWindow.x.toString()
+ " extY=" + oWindow.y.toString()
+ " x=" + oWindow.getEl().getX()
+ " y=" + oWindow.getEl().getY());
}
var move = function (win, dir)
{
var el = win.getEl();
if (!isCenter) {
el.alignTo(document, 'c-c', [0,0], true);
isCenter = true;
return;
}
switch (dir) {
case "left":
// el.alignTo(document, "l", [0, -el.getHeight() / 2], true);
// win.el.setX(50);
//win.setX(200);
win.getEl().move("l", 10);
isCenter = false;
break;
case "right":
el.alignTo(document, "r", [-el.getWidth(), -el.getHeight() / 2], true);
isCenter = false;
break;
case "up":
el.alignTo(document, "t", [-el.getWidth() / 2, 0], true);
isCenter = false;
break;
case "down":
el.alignTo(document, "b", [-el.getWidth() / 2, -el.getHeight()], true);
isCenter = false;
break;
case "home":
el.center();
isCenter = true;
break;
}
win.updateLayout();
showPosition();
};
var COLOUMN2 = function (value) {
return Ext.String.format('<img src="article_image.aspx?id={0}" id="myID" />', value);
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Label
runat="server"
ID="LabelPosition">
</ext:Label>
<ext:Window
ID="Window1"
runat="server"
Width="400"
Height="300"
Closable="false"
Title="Move Window"
BodyPadding="6">
<Content>
<ul>
<li>Press:</li>
<li> UP</li>
<li> DOWN</li>
<li> LEFT</li>
<li> RIGHT</li>
<li> HOME</li>
</ul>
</Content>
</ext:Window>
<ext:KeyNav runat="server" Target="={document.body}">
<Left Handler="move(#{Window1}, 'left');" />
<Right Handler="move(#{Window1}, 'right');" />
<Up Handler="move(#{Window1}, 'up');" />
<Down Handler="move(#{Window1}, 'down');" />
<Home Handler="move(#{Window1}, 'home');" />
</ext:KeyNav>
<script>Ext.onReady
(
function ()
{
showPosition();
}
);
</script>
</body>
</html>
Last edited by edip; Oct 16, 2018 at 1:50 PM.