Initialize a draggable element inside the rowbody of a grid

[paquerette]

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.

[Animal]

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

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

[paquerette]

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

   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',
        store: patientStore,
        listeners: {
            render: initializePatientDragZone
        }
    }); 

and the function :

/*
 * 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.itemSelector, 10);
            if (sourceEl) {
                d = sourceEl.cloneNode(true);
                d.id = Ext.id();
                return v.dragData = {
                    sourceEl: sourceEl,
                    repairXY: Ext.fly(sourceEl).getXY(),
                    ddel: d,
                    patientData: v.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]

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)

[Animal]

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.

[paquerette]

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.