PDA

View Full Version : Ext.ux.DragSelect



bartonjd
8 Jun 2009, 9:05 AM
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
8 Jun 2009, 7:46 PM
To simplify viewing the example I have uploaded the files and they may be viewed here
http://jbarton.virtualkingdoms.net/drag/

galdaka
9 Jun 2009, 9:29 AM
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
9 Jun 2009, 9:31 AM
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
9 Jun 2009, 11:04 AM
Ext.ux.grid.DragSelector works without problems in 3.0RC2 ;)
Greetings,

dbassett74
9 Jun 2009, 12:52 PM
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
9 Jun 2009, 4:54 PM
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
10 Jun 2009, 9:24 AM
Doesn't work for Fx 3.0.10 in OS X

bartonjd
10 Jun 2009, 11:36 AM
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
10 Jun 2009, 11:41 AM
Actually i guess it works. I was thinking it would *select* the image. i was wrong.

good work.

bartonjd
10 Jun 2009, 1:04 PM
I will definetly add that to the demo page.

astagl
9 Jul 2009, 12:43 PM
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?