1. #1
    Sencha User
    Join Date
    Jan 2009
    Posts
    61
    Vote Rating
    1
    bartonjd is on a distinguished road

      0  

    Default Ext.ux.DragSelect

    Ext.ux.DragSelect


    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:

    Code:
    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);
                                    }
                                }
    
                            });
    Attached Files
    Last edited by bartonjd; 8 Jun 2009 at 8:24 PM. Reason: corrected title

  2. #2
    Sencha User
    Join Date
    Jan 2009
    Posts
    61
    Vote Rating
    1
    bartonjd is on a distinguished road

      0  

    Default


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

  3. #3

  4. #4
    Sencha User
    Join Date
    Jan 2009
    Posts
    61
    Vote Rating
    1
    bartonjd is on a distinguished road

      0  

    Default


    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.

  5. #5

  6. #6
    Ext User
    Join Date
    Jan 2009
    Posts
    543
    Vote Rating
    0
    dbassett74 is on a distinguished road

      0  

    Default


    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!

  7. #7
    Sencha User
    Join Date
    Jan 2009
    Posts
    61
    Vote Rating
    1
    bartonjd is on a distinguished road

      0  

    Default


    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.

  8. #8
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Doesn't work for Fx 3.0.10 in OS X

  9. #9
    Sencha User
    Join Date
    Jan 2009
    Posts
    61
    Vote Rating
    1
    bartonjd is on a distinguished road

      0  

    Default


    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

  10. #10
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


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

    good work.