1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    114
    Vote Rating
    6
    johanhaest is on a distinguished road

      0  

    Default Draggin an ext.draw.Component in a Window

    Draggin an ext.draw.Component in a Window


    When I try to drag stuff I drew in a window the position in not relative to the window but to the whole page.
    So when the window's position is at 200 and I drag for example a rectangle it will always have 200 too many on its x value. The same thing happens for the y value. It's fixed when I put the window in the upperleft corner (window x = 0 and y = 0).
    Is there anyway I can fix this in code?

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Help us out by posting a simple example that we can debug with you.

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Posts
    114
    Vote Rating
    6
    johanhaest is on a distinguished road

      0  

    Default


    I've made a reasonable solution at the moment. This is where I add my component to the window (lThis):

    Code:
     var lStopEvent = new Ext.draw.Component({
                                                width: 60,
                                                height: 60,
                                                draggable: {
                                                    onDrag: function (e) {
                                                        lStopEvent.setPosition(tempX, tempY);
                                                    },
                                                    constrain: true
                                                },
                                                items: [{
                                                    type: "circle",
                                                    cx: 30,
                                                    cy: 30,
                                                    x: 30,
                                                    y: 30,
                                                    radius: 30,
                                                    stroke: "#fff",
                                                    fill: "#b22222"
                                                }]
                                            });
                                            lStopEvent.setPosition(tempX, tempY);
                                            lThis.add(lStopEvent);
    I've made a function to calculate my mouse position. And this gives tempX and tempY, I then use my window position to correctly calculate the X and Y for my component. Like you see in my code I changed the onDrag function of my draw.Component. This is currently working for me but it's not ideal.

  4. #4
    Sencha User
    Join Date
    Mar 2011
    Posts
    114
    Vote Rating
    6
    johanhaest is on a distinguished road

      0  

    Default


    Here is a simple example of a window with a rectangle I draw. When the window is not maximized try draggin around the window. You will see the problem.

    Code:
    Ext.require([
        'Ext.tab.*', 
        'Ext.window.*',
        'Ext.layout.container.Border'
    ]);
    
    Ext.onReady(function(){
          
            var myWin = new Ext.Window({
                id     : 'myWin',
                height : 500,
                width  : 800,
                maximizable: true,
                html: '<a href="javascript:newRectangle();">New Rectangle</a>'
            });
            
            myWin.show();
    });
    
    function newRectangle() {
            var singleRect = new Ext.draw.Component({
            width: 210,
            height: 105,
            padding: 0,
            cls: 'cursor-dragme',
            draggable: {
                constrain: true
            },
            floating: true,
            renderTo: Ext.get('myWin'),
            items: [    
            {
                type: "rect",
                width:200,
                height:100,
                x:0,
                y:0,
                stroke:"#000",
                "stroke-width":"2.5",
                fill:"#fff"
            }]
        });
    }

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Drop this into examples/<anywhere>

    Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <script type="text/javascript" src="../../bootstrap.js"></script>
    <script type="text/javascript">
    Ext.require(['*']);
    
    Ext.onReady(function(){
        var dc = new Ext.draw.Component({
            width: 210,
            height: 105,
            padding: 0,
            cls: 'cursor-dragme',
            constrain: true,
            draggable: true,
            floating: true,
            items: {
                type: "rect",
                width:200,
                height:100,
                x:0,
                y:0,
                stroke:"#000",
                "stroke-width":"2.5",
                fill:"#fff"
            }
        });
        win = new Ext.Window({
            height : 500,
            width  : 800,
            maximizable: true,
            items: dc
        });
        win.show();
        dc.show();
    });
    </script>
    </head>
    <body>
    </body>
    </html>

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I just put in a fix so that this will work:

    Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <script type="text/javascript" src="../../bootstrap.js"></script>
    <script type="text/javascript">
    Ext.require(['*']);
    
    Ext.onReady(function(){
        var dc = new Ext.draw.Component({
            width: 210,
            height: 105,
            padding: 0,
            cls: 'cursor-dragme',
            draggable: {
                constrain: true
            },
            floating: true,
            items: {
                type: "rect",
                width:200,
                height:100,
                x:0,
                y:0,
                stroke:"#000",
                "stroke-width":"2.5",
                fill:"#fff"
            }
        });
        win = new Ext.Window({
            height : 500,
            width  : 800,
            maximizable: true,
            items: dc
        });
        win.show();
        dc.show();
    });
    </script>
    </head>
    <body>
    </body>
    </html>
    You never render a child Component of a Container.

    If it's a non-floating Component, the Container's layout manager does it.

    Floating Components reder themselves upon first show. Just like Windows do as you see from your example: Your Window renders itself on show. All floating Components work like that now. A Window is not much more than a Panel with floating: true hardcoded into it (There's a little more than that, but not a lot!)

  7. #7
    Sencha User
    Join Date
    Mar 2011
    Posts
    114
    Vote Rating
    6
    johanhaest is on a distinguished road

      0  

    Default


    It works like a charm, but it doesn't constrain itself inside the Window (I can drag it outside of it).
    But you've helped my quite a bit with this.

    Edit: If I close the window, the rectangle stays visible.

  8. #8
    Sencha User
    Join Date
    Mar 2011
    Posts
    114
    Vote Rating
    6
    johanhaest is on a distinguished road

      0  

    Default


    Solved

    Code:
    draggable: true,
    constrain: true,
    instead of
    Code:
    draggable {
         constrain:true
    }

Similar Threads

  1. Ext.draw / Raphael
    By lorezyra in forum Community Discussion
    Replies: 1
    Last Post: 27 Jan 2011, 10:17 AM
  2. Draw the controls
    By Selvam packiam in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 29 Dec 2008, 3:01 AM
  3. How to Draw using Ext GWT
    By arindam_saha in forum Ext GWT: Help & Discussion (1.x)
    Replies: 1
    Last Post: 25 Dec 2008, 8:59 AM
  4. Detecing Draggin in a Grid
    By mike000 in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 5 Jul 2007, 5:36 AM

Thread Participants: 1