Ext.ux.DragSelect

[bartonjd]

I have created a simple extension (or perhaps it is better as a plugin) that creates a selection box similar to the one used in the data view example.
It is quite simple to use and is quite flexible but I would like the feedback from forum members on how I could improve this extension. I would also like to know if this would work better as a plugin. Any suggestions are appreciated. The code as well as an example are attached to this post, and I am posting the code below as well:



Ext.ns("Ext.ux");

Ext.ux.DragSelect = function(id, sGroup, config) {
if (id) {
this.init(id, sGroup, config);
}
this.proxyCls = this.proxyCls || 'x-view-selector';
Ext.applyIf(this, config);
}
Ext.extend(Ext.ux.DragSelect, Ext.dd.DragDrop, {

startDrag : function(x,y) {

this.startXYPos = [x,y];
try {
this.proxy = Ext.get("selectDiv").setDisplayed('block');
this.container = this.container || Ext.get(this.handleElId);
}
catch (ex){
this.container = Ext.get(this.handleElId);
this.proxy = this.container.createChild({cls:this.proxyCls, id:'selectDiv'});

}
if(typeof this.startDragfn== "function"){
try {
this.onDragfn(startXY, endXY);
}
catch(ex){}
}
},
onDrag: function(e) {
var eventXY = e.getXY();
var x = Math.min(this.startXYPos[0], eventXY[0]);
var y = Math.min(this.startXYPos[1], eventXY[1]);
var w = Math.abs(this.startXYPos[0] - eventXY[0]);
var h = Math.abs(this.startXYPos[1] - eventXY[1]);
var t=y;var l=(x+w);var b=(y+h);var r=x;
region = new Ext.lib.Region(t,l,b,r);
this.proxy.setRegion(new Ext.lib.Region(t,l,b,r));
if(typeof this.onDragfn== "function"){
try {
this.onDragfn(startXY, endXY);
}
catch(ex){}
}

},

getDifference : function (xy1, xy2, abs){
var diff = [0,0];
if (xy1 == null || xy2 == null){
try {
xy1 = this.startXYPos;
xy2 = this.endXYPos;
}
catch(ex){
return false;
}
}
if (!abs){
diff[0] = Math.abs(xy1[0]-xy2[0]);
diff[1] = Math.abs(xy1[1]-xy2[1]);
}
else {
diff[0] = xy1[0]-xy2[0];
diff[1] = xy1[1]-xy2[1];
}

return diff;
},

endDrag : function(e) {
try {
this.endXYPos =e.getXY();
var distanceXY = this.container.getAnchorXY("tl");
startXY = this.getDifference(this.startXYPos,distanceXY);
endXY = this.getDifference(this.endXYPos,distanceXY);

if(typeof this.endDragfn== "function"){
this.endDragfn(startXY,endXY);
}
}
catch(ex){}
finally {
this.proxy.setDisplayed(false);
}
}

});

[bartonjd]

To simplify viewing the example I have uploaded the files and they may be viewed here
http://jbarton.virtualkingdoms.net/drag/

[galdaka]

Hi,

Excellent work!!

I use Grid drag selector wothiout problems. But I will test your code in future.

https://extjs.com/forum/showthread.php?t=17826

Greetings,

[bartonjd]

Galdaka thank you for response, if you have any ideas for improving this I would be more than happy to add them or add any changes you think might make it easier to use.

[galdaka]

Ext.ux.grid.DragSelector works without problems in 3.0RC2 ;)
Greetings,

[dbassett74]

I love this idea. I wish it was part of the grid as it makes it much more user friendly and intuitive. But, I'm glad there are some third party solutions for this at least. Great work!

[bartonjd]

In what ways could this be implemented in the grid, or is there already a grid selector ? I would be interested in adding functionality for other widgets if we can determine the need.

[jay@moduscreate.com]

Doesn't work for Fx 3.0.10 in OS X

[bartonjd]

Does it do anything? I don't have access to a mac in order to test it, but anything you can tell me will be helpful. I will check if there is a firefox extension that simulates os x compatibility

[jay@moduscreate.com]

Actually i guess it works. I was thinking it would *select* the image. i was wrong.

good work.

[bartonjd]

I will definetly add that to the demo page.

[astagl]

I am keeping my eye out for this. I'm thinking a generic drag selector would be rather useful for many things. Maybe if an Ext.Component is a part of a particular ds_group (or some other attribute), a handler would then be called when selected?