Attach events to grid DOM

Question

I want to drag from an ExtJS grid row into a textarea field at a certain position in the textarea.

HTML5's Drag API supports such drag/drop operations (http://jsfiddle.net/a98bwb07/3/), but I did not find that ExtJS supports this, so I wanted to use the HTML5 Drag API:

document.getElementById('img').addEventListener('dragstart', function (e) {
    e.dataTransfer.setData("text", '[img]' + this.id + '[/img]');
    e.dataTransfer.setDragImage(this, 0,0);
});

I tried to add a delegated event on the grid:

grid.on({
    dragstart: {
        fn: function(e) {
            console.log(e);
        },
        delegate: grid.getView().rowSelector
    }
})

but it isn't fired. (https://fiddle.sencha.com/#view/editor&fiddle/2dac)

How can I attach the dragstart event to all grid rows in a fashion that survives grid refresh and data changes?

What is your requirement. I mean after drag you want to copy row to textarea? — swaroop pallapothu
@swarooppallapothu I want to insert some text, created from the row content, into the textarea content, at the cursor position. Check out the jsfiddle, try to drag the image into the textarea and you will see that you can insert text at any position in the textarea. I want to do the same, in ExtJS, from an ExtJS grid row. — Alexander
You need to attach it to an element of the grid, not the grid itself. — Evan Trimboli

Nikos Js Nikos Js · Accepted Answer · 2018-02-19T17:46:32

0

votes

I think you need to add element : 'body' to dragstart fiddle

Attach events to grid DOM

1 Answers