PDA

View Full Version : Draggin an ext.draw.Component in a Window



johanhaest
9 Mar 2011, 7:30 AM
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?

Animal
9 Mar 2011, 10:25 PM
Help us out by posting a simple example that we can debug with you.

johanhaest
9 Mar 2011, 11:24 PM
I've made a reasonable solution at the moment. This is where I add my component to the window (lThis):


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.

johanhaest
9 Mar 2011, 11:33 PM
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.



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"
}]
});
}

Animal
10 Mar 2011, 12:18 AM
Drop this into examples/<anywhere>



<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>

Animal
10 Mar 2011, 12:26 AM
I just put in a fix so that this will work:



<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!)

johanhaest
10 Mar 2011, 1:15 AM
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.

johanhaest
11 Mar 2011, 2:00 AM
Solved



draggable: true,
constrain: true,


instead of


draggable {
constrain:true
}