PDA

View Full Version : Unable to draw dragged area using Drag Tracker on component rendered with image



jprakash
31 Aug 2011, 12:19 AM
Hi All,

I wish to draw a drag area block on an image which i have rendered on Ext.component. I wished to do something as demonstrate in the below example

http://dev.sencha.com/deploy/ext-3.4.0/examples/organizer/organizer.html (http://dev.sencha.com/deploy/ext-3.4.0/examples/organizer/organizer.html)

I wish to draw dragged area around an image. I have slightly modified the drag tracker code that was used for the above example. Here is my code


Ext.onReady(function() {
Ext.QuickTips.init();


dragSelector = function(cfg)
{
cfg = cfg || {};
var element, proxy, tracker;
var bodyRegion, dragRegion = new Ext.lib.Region(0,0,0,0);
var dragSafe = cfg.dragSafe === true;


this.init = function(element){
component = element;
component.on('render', onRender);
};


function fillRegions(){
bodyRegion = component.el.getRegion();
//console.log(bodyRegion);
}//end fillRegions()


function onBeforeStart(e){
return !dragSafe || e.target == component.el.dom;
}//end onBeforeStart()


function onStart(e) {
if(!proxy) {
proxy = component.el.createChild({cls:'x-view-selector'});
} else {
if(proxy.dom.parentNode !== component.el.dom) {
component.el.dom.appendChild(proxy.dom);
}
proxy.setDisplayed('block');
}
fillRegions();
}//end onStart()
function onDrag(e) {
var startXY = tracker.startXY;
var xy = tracker.getXY();


var x = Math.min(startXY[0], xy[0]);
var y = Math.min(startXY[1], xy[1]);
var w = Math.abs(startXY[0] - xy[0]);
var h = Math.abs(startXY[1] - xy[1]);


dragRegion.left = x;
dragRegion.top = y;
dragRegion.right = x+w;
dragRegion.bottom = y+h;


dragRegion.constrainTo(bodyRegion);
//console.log(bodyRegion);
//console.log(dragRegion);
proxy.setRegion(dragRegion);


}//end onDrag()


function onEnd(e){
//console.log(proxy);
if(proxy) {
proxy.setDisplayed(false);
}
}//end onEnd()


function onRender(element) {
tracker = new Ext.dd.DragTracker({
onBeforeStart: onBeforeStart,
onStart : onStart,
onDrag : onDrag,
onEnd : onEnd
});
tracker.initEl(component.getEl());
}//end onRender()


}//end dragSelector()
var win = new Ext.Window({
width :900,
height :300,
title : 'Rrd graph zoom image',
items:[
{
xtype: 'component',
plugins: new dragSelector({dragSafe: true}),
ref: 'zoomcomponent',
autoEl : {
tag : 'img',
src: "http://localhost/perfviewer/web/rrd.png"
}
}
]//end window items
});


win.show();
});//end onReady()






When i did my debugging printing console-logs everything looks fine and as expected. But i am unable to draw a blocked drag area on my image.

I am pretty sure this would be some pretty simple config option i might have missed. Any thoughts or references would be highly appreciated.

Thanks,
Jai