Element getBottom() returns 0

[kalbster]

I have a simple collision detection script I am taking from ExtJS and trying to work with Sencha Touch. The problem I am having is that the getBottom() function returns 0 for my dragged element. The getHeight and getTop functions return properly. I can use the offset and the height to calculate the bottom, but I am curious as to why the getBottom function would return 0 in this case:





<div id="ARENA" style="border:#000000 solid thin; left:0px; background-color:#FFFFFF; width:320px; height:480px; z-index:6000; position:absolute" align="center">

<div id="PAWN" style="left:150px; top:100px; width:97px; height:120px; border:#FF0000 solid thin; z-index:6002; position:absolute; overflow:hidden;" align="center"> </div>

<div id="HIGHLIGHT" style="left:150px; top:250px; width:25px; height:25px; border:#FFF000 solid thin; z-index:6003; position:absolute; overflow:hidden; background:#06F" align="center"> </div>

</div>



<script language="JavaScript">


Ext.setup({
glossOnIcon: false,
onReady: function(){

var target = Ext.get('PAWN');
var highlight = Ext.get('HIGHLIGHT');

new Ext.util.Draggable('HIGHLIGHT', {
revert: false,
constrain:'parent',
listeners: {'offsetchange':function(d,off){

console.log('highlight.getTop(): ' + highlight.getTop() + 'target.getTop(): ' + target.getTop() + ' off.y: ' + off.y + ' (highlight.getTop() + off.y) ' + (highlight.getTop() + off.y) + ' target.getBottom(): ' + target.getBottom() + ' target.getHeight(): ' + target.getHeight());

if (
((highlight.getTop() + off.y) >= target.getTop()) && ((highlight.getTop() + off.y) <= target.getBottom())

){
console.log('HIT HT:' + highlight.getTop() + ' TT: ' + target.getTop() + ' TB: ' + target.getBottom() );
target.setStyle('background','#e4e4e4');
} else {
target.setStyle('background','#000000');
}
}
}
});

}
});


</script>

[mitchellsimoens]

It should work no problem. Could be a bug.

One thing I would suggest for your code, if you have to execute a function more than once, create a variable for that function and reference that function. I see you are calling getTop for highlight and target several times, each of them should get it's own variable and same for the getBottom.

[kalbster]

Thanks Mitchell,

I did change my code to use variables after I was done testing out this issue.

I found that the getRight() function also returns 0.

Another difference from ExtJS is that calling the getLeft, etc functions during a drag will return the position while you drag. In Sencha Touch, you need to use the offset values to calculate the new position of the dragged element.

ExtJS code:




<div id="ARENA" style="border:#000000 solid thin; left:0px; background-color:#FFFFFF; width:320px; height:480px; z-index:6000; position:absolute" align="center">
<div id="PAWN" style="left:150px; top:100px; width:97px; height:120px; border:#FF0000 solid thin; z-index:6002; position:absolute; overflow:hidden;" align="center"> </div>
<div id="HIGHLIGHT" style="left:0px; top:0px; width:40px; height:40px; display:block; border:#FFF000 solid thin; z-index:6003; position:absolute; overflow:hidden; background:#06F" align="center"> </div>
</div>

<script language="JavaScript">
Ext.onReady(function(){

var draggable = new Ext.dd.DD('HIGHLIGHT');
draggable.constrainTo('ARENA');

var target = Ext.get('PAWN');
var highlight = Ext.get('HIGHLIGHT');


draggable.onDrag=function(e){


var hTop = highlight.getTop();
var hBottom = hTop + highlight.getHeight();
var hLeft =highlight.getLeft();
var hRight = hLeft + highlight.getWidth();



var tTop = target.getTop();
var tBottom = tTop + target.getHeight();
var tLeft = target.getLeft();
var tRight = tLeft + target.getWidth();


if (
(hTop >= tTop) && (hTop <= tBottom)
&&
(hBottom >= tTop) && (hBottom <= tBottom)
&&
(hRight >= tLeft) && (hRight <= tRight)
&&
(hLeft >= tLeft) && (hLeft <= tRight)
){

target.setStyle('background','#e4e4e4');
} else {
target.setStyle('background','#FFFFFF');
}

}


});

</script>


Sencha Touch Code




<div id="ARENA" style="border:#000000 solid thin; left:0px; background-color:#FFFFFF; width:320px; height:480px; z-index:6000; position:absolute" align="center">
<div id="PAWN" style="left:150px; top:100px; width:97px; height:120px; border:#FF0000 solid thin; z-index:6002; position:absolute; overflow:hidden;" align="center"> </div>
<div id="HIGHLIGHT" style="left:150px; top:250px; width:25px; height:25px; border:#FFF000 solid thin; z-index:6003; position:absolute; overflow:hidden; background:#06F" align="center"> </div>
</div>

<script language="JavaScript">

Ext.setup({
glossOnIcon: false,
onReady: function(){

var target = Ext.get('PAWN');
var highlight = Ext.get('HIGHLIGHT');

new Ext.util.Draggable('HIGHLIGHT', {
revert: false,
constrain:'parent',
listeners: {'offsetchange':function(d,off){

var hTop = highlight.getTop() + off.y;
var hBottom = hTop + highlight.getHeight();
var hLeft =highlight.getLeft() + off.x;
var hRight = hLeft + highlight.getWidth();

//console.log('hTop: ' + hTop + ' hBottom: ' + hBottom + ' hLeft: ' + hLeft + ' hRight: ' + hRight);


var tTop = target.getTop();
var tBottom = target.getTop() + target.getHeight();
var tLeft = target.getLeft();
var tRight = tLeft + target.getWidth();
//console.log('tTop: ' + tTop + ' tBottom: ' + tBottom + ' tLeft: ' + tLeft + ' tRight: ' + tRight);

if (
(hTop >= tTop ) && (hTop <= tBottom)
&&
(hBottom >= tTop ) && (hBottom <= tBottom )
&&
(hRight >= tLeft) && (hRight <= tRight)
&&
(hLeft >= tLeft) && (hLeft <= tRight)
){

target.setStyle('background','#e4e4e4');
} else {
target.setStyle('background','#000000');
}
}
}
});

}
});


</script>




I hope this helps those working with both Sencha products