PDA

View Full Version : Issue with multiple draggable elements (extjs 4.07)



WillBill
11 May 2012, 5:09 AM
Hello,


I'm working on a color picker, but I'm running into a weird problem.
My hue arrow gets an left offset of roughly 260 pixels when you select it, you can
drag it, but it sets "left: 267" each time I select it and start to drag.

The first one, which lets you select value and saturation, doesn't have this problem.

I started out making it in a window, but then I was facing the same issue but this time none
of them would work. Seeing as a window, by itself, is a draggable item aswell, the problem
probably has something to do with the second draggable item using the width of the parent
of first draggable element to offset the left value?

I've added some screenshots to clarify my story, because I have no idea how to properly explain
what's going on.



Ext.create('Ext.panel.Panel', {
id: 'color-picker',
height: 300,
width: 500,
renderTo: Ext.getBody(),
layout: 'hbox',
items: [
{
xtype: 'container',
width: 266,
height: 266,
id: 'test',
items: [
{
xtype: 'image',
width: 256,
height: 256,
id: 'gradientImg',
src: 'images/color_picker_gradient.png',
style: {
marginTop: '5px',
marginLeft: '5px'
},
listeners: {
afterrender: function(c) {
c.el.on('mousedown', function(e) {
Ext.getCmp('circleImage').setPagePosition(e.getPageX() - 5, e.getPageY() - 5);
}, this , {
//delegate: '#menu-btn'
});
}
}
},
{
xtype: 'container',
id: 'circleContainer',
width: 11,
height: 11,
items: [
{
xtype: 'image',
id: 'circleImage',
style: {
position: 'absolute',
top: '0px'
},
src: 'images/color_picker_circle.gif',
draggable: {
delegate: 'circleContainer',
constrain: true,
constrainTo: 'test'
},
listeners: {
move: function(e, left, top, obj) {
var val = Math.round(left / (256/100));
var sat = Math.round(top / (256/100));
console.log(val, sat);
}
}
}
]
}
]
},
{
xtype: 'container',
id: 'hueContainer',
width: 19,
height: 256,
items: [
{
xtype: 'image',
width: 19,
height: 256,
style: {
marginLeft: '25px'
},
src: 'images/color_picker_bar.png'
},
{
xtype: 'container',
id: 'arrowContainer',
width: 35,
height: 9,
items: [
{
xtype: 'image',
id: 'arrowImage',
style: {
position: 'absolute',
marginLeft: '17px',
top: '0px',
left: '0px'
},
src: 'images/color_picker_arrows.gif',
draggable: {
constrain: true,
constrainTo: 'hueContainer'
}
}
]
}
]
}
]
});

scottmartin
14 May 2012, 2:14 PM
Have you tried 4.1? There were many fixes.

Regards,
Scott.

WillBill
14 May 2012, 10:57 PM
I've fixed the issue I had, the draggable item still gets an offset but it's nowhere near as much as it
was before. I've been able to compensate for the offset i'm getting now.

Thanks tho!