PDA

View Full Version : place an object in a panel to coordinates X and Y



TAG
19 Aug 2009, 1:16 AM
Hello,
I have a problem with the positioning of an object within a panel. I have a Panel, and in this PAnel I have a '<div>' with the property width and height equals to 8000px. In this way, I can have a Panel with the scrollbar button and right, and have a big work area. My application have two Panel, in the left Panel I have a list of Object, with the D&D are entered in the right panel.
When I put the object in right panel, I generate the new Object, and insert this in the PAnel.I put the object coordinates of the click of a mouse. To do this I read the mouse coordinates.
If the scrollbar are in the start position(top 0,left 0), I haven't problem, but when the scrollbar aren't in the start position, the Object is inserted in the relative position coordinates of the mouse to read, not updated in relation to the scrollbar. Is there a way to see the position of the scrollbar? Or to insert correctly the Object in the relative position of 'div'?

the code is:
HTML:


...
<body>
<div id="Panel1">
<div id="grigliaValue" class="griglia">
</div>
</div>
</body>
...


Ext Js:


var pannello=new Ext.Panel({
title: 'titolo',
contentEl: 'Panel1',
autoScroll: true,
id: 'Genericidtitolo',
listeners: {
render: function(){
var ddrowTarget = new Ext.dd.DropTarget(Ext.get('Genericidtitolo'), {
ddGroup: "mygroup",
notifyDrop : function(dd, e, data){
var coords = e.getXY();
var appoggio=AreaCentrale.getItem('Genericidtitolo');
Ext.get("GrigliaValue").insertHtml('beforeEnd','<img id="pippo" src="pippo.jpg" height="100" width="100" style="left:'+coords[0]+'px;top:'+coords[1]+'px;">')
appoggio.add(new Ext.Resizable('pippo', {
wrap:true,
pinned:false,
handles: 'all',
draggable:true,
dynamic:true
}));
}})}}})


CSS


.griglia{
background-image: url("griglia.jpg");
width:8000px;
height:8000px;
overflow:visible;
}