how to get position of object?

i can setPosition of object, but how to get the position of object?? i do this stupid code to resize the grid with drag and drop. my problem is how to place the control in the outer of grid. this code just working if the grid is start from top-right. if not in the top-right, the div control is place wrong.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="grid/runtime/lib/aw.js"></script>
<link href="grid/runtime/styles/xp/aw.css" rel="stylesheet"></link>
<style>
#btsgrid{

}
</style>
</head>

<body>
<div id="btsgrid"><span id="myGrid"></span></div>
<script>
function gsrBatas(bts,bts2,grid,event,aksi){
var start=0;var w=0;var width=0;var tetap=0;
if(aksi=='kanan'){start = event.clientX;tetap=event.clientY;width = grid.element().offsetWidth;}
if(aksi=='bawah'){start = event.clientY;tetap=event.clientX;width = grid.element().offsetHeight;}
var w2=bts2.element().offsetWidth;
var gx=grid.element().offsetWidth;
var mx=grid.getStyle('margin-left');
if(mx)gx=gx+parseInt(mx);
var y2=bts2.element().offsetHeight;
var gy=grid.element().offsetHeight;
function doResize(event) {
if(aksi=='kanan') {w = width + event.clientX - start;grid.element().style.width = (w - AW.dx) + "px";
bts.setPosition(event.clientX-3,tetap-2);bts2.setPosition((w2+w/2),(y2+gy)-1);}
if(aksi=='bawah') {w = width + event.clientY - start;grid.element().style.height = (w - AW.dx) + "px";
bts.setPosition(tetap-2,event.clientY-3);bts2.setPosition((y2+gx)-1,y2+w/2);}

}
function endResize(event) {
var e = bts.element();
var e2=grid.element();
AW.detachEvent(e, "onmousemove", doResize);
AW.detachEvent(e, "onmouseup", endResize);
AW.detachEvent(e, "onlosecapture", endResize);
AW.detachEvent(e2, "onlosecapture", endResize);
AW.releaseCapture(e);
AW.releaseCapture(e2);
e = null;e2=null;
}

var e = AW.srcElement(event);
AW.setCapture(e);
AW.attachEvent(e, "onmousemove", doResize);
AW.attachEvent(e, "onmouseup", endResize);
AW.attachEvent(e, "onlosecapture", endResize);
e = null;
event.cancelBubble = true;
}

function ktrlResize(grid,gr){
var bka=new AW.HTML.DIV();
bka.setStyle('background-color','black');
bka.setStyle('position','relative');
bka.setStyle('overflow','hidden');
bka.setStyle('height','0.3em');
bka.setStyle('width','0.3em');
bka.setStyle('margin','0');
bka.setStyle('padding','1px');
bka.setStyle('cursor','w-resize');
bka.setEvent("onmousedown", function (event) {
gsrBatas(bka,bbw,grid,event,'kanan');
} );
var bbw=new AW.HTML.DIV();
bbw.setStyle('background-color','black');
bbw.setStyle('position','relative');
bbw.setStyle('overflow','hidden');
bbw.setStyle('height','0.3em');
bbw.setStyle('width','0.3em');
bbw.setStyle('margin','0');
bbw.setStyle('padding','1px');
bbw.setStyle('cursor','n-resize');
bbw.setEvent("onmousedown", function (event) {
gsrBatas(bbw,bka,grid,event,'bawah');
} );
document.getElementById(gr).innerHTML=grid+''+bka+bbw;

var mrg=grid.getStyle('margin-left');
var mrg2=grid.getStyle('margin-top');
var width = grid.element().offsetWidth;
var height = grid.element().offsetHeight;

var letakX=width+4;
var letakY=height+4;
if(mrg)letakX=letakX+parseInt(mrg);
if(mrg2)letakY=letakY+parseInt(mrg2);
bbw.setPosition(letakX/2,letakY);
bka.setPosition(letakX,letakY/2);
}

var myData = [
[1, "World", 1018057389, 2005, "world"],
[2, "European Union", 247000000, 2006, "eu"],
[3, "United States", 205326680, 2005, "us"],
[4, "China", 123000000, 2006, "cn"],
[5, "Japan", 86300000, 2005, "jp"],
[6, "India", 60000000, 2005, "in"],
[7, "Germany", 50616000, 2006, "de"],
[8, "United Kingdom", 37600000, 2005, "gb"],
[9, "Korea South", 33900000, 2005, "kr"],
[10, "France", 29945000, 2006, "fr"] // no comma in the last line
];

var myHeaders = ["Rank", "Country", "Internet users", "Data from"];

var myImages = ["", "world", "user", "clock"];

</script>


<script>
var num = new AW.Formats.Number;
num.setTextFormat("#,###.");

var grid = new AW.Grid.Extended;
grid.setId("myGrid");
grid.setHeaderText(myHeaders);
grid.setHeaderImage(myImages); // set header images using array
grid.setCellData(myData);
grid.setCellFormat(num, 2);
grid.setColumnCount(4);
grid.setRowCount(10);
grid.setSize(400,300);
grid.refresh();

ktrlResize(grid,'btsgrid');// show kontrol resize

</script>
</body>
</html>

Forum search