1. #1
    Ext User
    Join Date
    Jul 2007
    Posts
    2
    Vote Rating
    0
    dustismo is on a distinguished road

      0  

    Default Tree + Drag n Drop disable selection during drag

    Tree + Drag n Drop disable selection during drag


    I have a tree where the nodes are movable within the tree and selecting a node submits a form (reloading the page). Problem is that a selection always happens when a node is dragged. How can I disable selection during dragging?

    thanks for any help,
    Dustin

  2. #2
    Sencha User
    Join Date
    May 2007
    Posts
    24
    Vote Rating
    1
    gigel is on a distinguished road

      0  

    Default


    I also have a tree that loads data on "selectionchange". I would like the "selectionchange" to be fired when the user releases the mouse button (the "mouseup" DOM event). This way, the user can move tree items without being interrupted by the loading. Would that be possible to configure somehow?

  3. #3
    Sencha User
    Join Date
    Jul 2009
    Posts
    29
    Vote Rating
    0
    mailme_gx is on a distinguished road

      0  

    Default


    bump!

    any examples/tips on how to suspend selection during dragging?

    GX

  4. #4
    Sencha User
    Join Date
    Jul 2009
    Posts
    29
    Vote Rating
    0
    mailme_gx is on a distinguished road

      0  

    Default


    here is my solution, may not be the most correct/elegant but serves my purpose :

    PHP Code:
    Ext.override(Ext.tree.TreeDragZone, {
        
    b4MouseDown : function(e){
            var 
    sm this.tree.getSelectionModel();
            if(
    sm != null)
                
    sm.suspendEvents(true);
            
    Ext.tree.TreeDragZone.superclass.b4MouseDown.apply(thisarguments);
        }
    });
     
    Ext.override(Ext.tree.TreeDragZone, {
        
    onMouseUp : function(){
            var 
    sm this.tree.getSelectionModel();
            if(
    sm != null)
                
    sm.resumeEvents();
            
    Ext.tree.TreeDragZone.superclass.onMouseUp.apply(thisarguments);
        }
    }); 
    Hope this will help someone.

    GX

  5. #5
    Ext User
    Join Date
    Oct 2009
    Posts
    3
    Vote Rating
    0
    dark4ce is on a distinguished road

      0  

    Default not a nice fix but works

    not a nice fix but works


    1. try declaring a global var like "nodeWasClicked" which is initialy false

    2. add a beforeselect event an disable select if node was not clicked like this:

    Code:
    treeSelModel.on('beforeselect',function(selModel,newNode,oldNode){
            if(!nodeWasClicked)
                return false;
        });
    3.add an onclick event to your tree like this:

    Code:
    click: function(n){
                        nodeWasClicked=true;
                        n.select();
                        nodeWasClicked=false;
                    }
    now the nodes in the tree will only be selected when clicked and not on drag

    hope this helps...gave me alot of headakes

  6. #6
    Sencha User
    Join Date
    Apr 2011
    Posts
    18
    Vote Rating
    0
    alwintom is on a distinguished road

      0  

    Default Tree Drag Drop without selecting the node

    Tree Drag Drop without selecting the node


    I have been trying to tackle this issue and both of the above methods did not work completely.
    mailme_gx's method does a good job. It prevent node selection while you start dragging a node. but when you release the mouse button, it selects the node that was dragged.
    On the other hand, dark4ce's did not have this problem. However, it had another issue. If you dragged a node and after that every call node.select() will fail. This is because the nodeWasClicked is set to false and beforeselect listener will fail.

    My solution wass to extend/alter mailme_gx's method. The problem with his method, was when you resume the events on selection mode, the queued up events will be invoked and cause the selection of node. The solution is to clear the queued up events if the operation was a drag. But how do we differentiate between a drag and click. Well if you have been dragging, the point where you pressed your mouse button and the point where you released will be different.
    Code:
    Ext.override(Ext.tree.TreeDragZone, {
        lastClickAt: null,
        b4MouseDown : function(e){
            var sm = this.tree.getSelectionModel();
            this.lastClickAt = e.getXY();
            if(sm != null)
                sm.suspendEvents(true);
            Ext.tree.TreeDragZone.superclass.b4MouseDown.apply(this, arguments);
        }
    });
     
    Ext.override(Ext.tree.TreeDragZone, {
        onMouseUp : function(e){
            var sm = this.tree.getSelectionModel();
            var loc = e.getXY();
            if(sm != null && (this.lastClickAt == null || (this.lastClickAt[0] == loc[0] && this.lastClickAt[1] == loc[1])) )
                sm.resumeEvents();
            else{
                sm.clearEventQueue();
                sm.resumeEvents();        
            }
            Ext.tree.TreeDragZone.superclass.onMouseUp.apply(this, arguments);
        }
    }); 
    
    Ext.override(Ext.tree.DefaultSelectionModel, {
        clearEventQueue : function() {
            var me = this;
            delete me.eventQueue;
        }
    });

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar