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,499
    Vote Rating
    46
    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,499
    Vote Rating
    46
    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,499
    Vote Rating
    46
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi