1. #1
    Ext JS Premium Member
    Join Date
    Jun 2007
    Location
    Paris, France
    Posts
    70
    Vote Rating
    0
    paquerette is on a distinguished road

      0  

    Default Initialize a draggable element inside the rowbody of a grid

    Initialize a draggable element inside the rowbody of a grid


    Hi,

    I've a grid, with a rowbody, in which I've several elements to drag & drop.

    The problem is that I can't figure out the event to use so that the rowbody is rendered and I can initialize the drag feature on it.

    I've tryed several events but each time, the store isn't filled (the store uses ajax) or the element I want to be draggable isn't rendered.

    Any Idea of how to proceed ?

    Regards,
    Thomas.
    Paquerette
    -- Life is a zoo in a jungle

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    A DragZone with a customized getDragData is the way to go.

    You interrogate the mousedoown event and find out exactly what is mousedowned upon.

  3. #3
    Ext JS Premium Member
    Join Date
    Jun 2007
    Location
    Paris, France
    Posts
    70
    Vote Rating
    0
    paquerette is on a distinguished road

      0  

    Exclamation


    In your hospital example, you use the onRender event to initialize draggable zone :

    PHP Code:
       var patientView = new Ext.DataView({
            
    cls'patient-view',
            
    tpl'<tpl for=".">' +
                    
    '<div class="patient-source"><table><tbody>' +
                        
    '<tr><td class="patient-label">Name</td><td class="patient-name">{name}</td></tr>' +
                        
    '<tr><td class="patient-label">Address</td><td class="patient-name">{address}</td></tr>' +
                        
    '<tr><td class="patient-label">Telephone</td><td class="patient-name">{telephone}</td></tr>' +
                    
    '</tbody></table></div>' +
                 
    '</tpl>',
            
    itemSelector'div.patient-source',
            
    storepatientStore,
            
    listeners: {
                
    renderinitializePatientDragZone
            
    }
        }); 
    and the function :

    PHP Code:
    /*
     * Here is where we "activate" the DataView.
     * We have decided that each node with the class "patient-source" encapsulates a single draggable
     * object.
     *
     * So we inject code into the DragZone which, when passed a mousedown event, interrogates
     * the event to see if it was within an element with the class "patient-source". If so, we
     * return non-null drag data.
     *
     * Returning non-null drag data indicates that the mousedown event has begun a dragging process.
     * The data must contain a property called "ddel" which is a DOM element which provides an image
     * of the data being dragged. The actual node clicked on is not dragged, a proxy element is dragged.
     * We can insert any other data into the data object, and this will be used by a cooperating DropZone
     * to perform the drop operation.
     */
    function initializePatientDragZone(v) {
        
    v.dragZone = new Ext.dd.DragZone(v.getEl(), {

    //      On receipt of a mousedown event, see if it is within a draggable element.
    //      Return a drag data object if so. The data object can contain arbitrary application
    //      data, but it should also contain a DOM element in the ddel property to provide
    //      a proxy to drag.
            
    getDragData: function(e) {
                var 
    sourceEl e.getTarget(v.itemSelector10);
                if (
    sourceEl) {
                    
    sourceEl.cloneNode(true);
                    
    d.id Ext.id();
                    return 
    v.dragData = {
                        
    sourceElsourceEl,
                        
    repairXYExt.fly(sourceEl).getXY(),
                        
    ddeld,
                        
    patientDatav.getRecord(sourceEl).data
                    
    }
                }
            },

    //      Provide coordinates for the proxy to slide back to on failed drag.
    //      This is the original XY coordinates of the draggable element.
            
    getRepairXY: function() {
                return 
    this.dragData.repairXY;
            }
        });

    I've already written the equivalent of this fuction. my issue is to find the correct event that occurs after the rowbody of each line is rendered.

    the add event is not triggered, on the render event, the store is empty.

    in the rowbody, I build x div, and in my function I get the div with Ext.get() and set them draggable. but to do that, they need to be rendered.

    Thomas.
    Paquerette
    -- Life is a zoo in a jungle

  4. #4
    Ext JS Premium Member
    Join Date
    Jun 2007
    Location
    Paris, France
    Posts
    70
    Vote Rating
    0
    paquerette is on a distinguished road

      0  

    Default


    Anybody ?

    Should I use a Ugly setTimeout to setup the draggable zone with the silly hope that every time, the rowbody of the grid will be rendered ? ;o)
    Paquerette
    -- Life is a zoo in a jungle

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You don't want to create a DragZone for each row do you????

    A DragZone for the GridPanel.

    And the getDragData decides exactly where the click happens, what has been clicked on, and what data must be "picked up" when it gets a mousedown event.

  6. #6
    Ext JS Premium Member
    Join Date
    Jun 2007
    Location
    Paris, France
    Posts
    70
    Vote Rating
    0
    paquerette is on a distinguished road

      0  

    Wink


    lol.......

    in fact, I intend to setup up to 4 draggables elements per row
    but, in my business case, the number of row won't exceed 10 (and would be more likely 3 or 4).

    But you're suggesting another way of doing

    I should setup the grid as a draggable zone, and I guess that with an 'item selector' in the getTarget() method will designate the div I've clicked on, and get the correct data.

    Now I realized that's the way it works in the patient view, but I didn't realize it until now (it's a DrageZone that you initialize not a draggable element... that's the confusion I made that lead me in the wrong way)

    Thanks Animal to open my eyes!

    Thomas.
    Paquerette
    -- Life is a zoo in a jungle

Thread Participants: 1

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