Container Scrolling Issue
Hello,
I am using the Ext.Net example https://examples4.ext.net/#/Keys/KeyNav/Basic/ and i have modified the page illustrate the issue i am having with the container panel scrolling when not necessary. The code markup is shown below. When i move the window to the right or down with the arrow keys, the container panel scrolls even though it is not necessary. How can i stop the container panel from scrolling unless it is necessary? Thanks.
Code:
<%@ 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;
}
var iDistance = 30;
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);
win.setPosition(win.x - iDistance, win.y);
isCenter = false;
break;
case "right":
// el.alignTo(document, "r", [-el.getWidth(), -el.getHeight() / 2], true);
win.setPosition(win.x + iDistance, win.y);
isCenter = false;
break;
case "up":
//el.alignTo(document, "t", [-el.getWidth() / 2, 0], true);
win.setPosition(win.x, win.y - iDistance);
isCenter = false;
break;
case "down":
// el.alignTo(document, "b", [-el.getWidth() / 2, -el.getHeight()], true);
win.setPosition(win.x, win.y + iDistance);
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:Panel runat="server" Width="2200" Height="1400" ID="ThePanel">
<Items>
<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>
</Items>
</ext:Panel>
<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();
var oPanel = Ext.getCmp("ThePanel");
oPanel.width = Ext.getBody().getViewSize().width + 200;
oPanel.height = Ext.getBody().getViewSize().height + 200;
}
);
</script>
</body>
</html>
