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.

<%@ 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>&nbsp;&nbsp;UP</li>
                        <li>&nbsp;&nbsp;DOWN</li>
                        <li>&nbsp;&nbsp;LEFT</li>
                        <li>&nbsp;&nbsp;RIGHT</li>
                        <li>&nbsp;&nbsp;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>