Moving Component not updating Coordinates

  1. #1

    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?

    <%@ 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>&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>
        
    
        <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.

Similar Threads

  1. [CLOSED] Auto Updating Store Custom Component
    By vgvallee in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 22, 2013, 11:44 PM
  2. Replies: 2
    Last Post: Jun 27, 2013, 10:18 PM
  3. Replies: 8
    Last Post: Feb 06, 2013, 6:27 PM
  4. Replies: 2
    Last Post: Nov 21, 2012, 11:46 AM
  5. [CLOSED] Contextmenu click coordinates?
    By jcanton in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 09, 2009, 7:49 AM

Tags for this Thread

Posting Permissions