PDA

View Full Version : DataView drag and drop



cripkd
15 Sep 2009, 10:44 PM
I've been following the example in dragdropzones.html and reading on drag and drop.
It's a bit blurry now, since its not clear when i should use dd groups and when just define drag zones and drop zones, like the example does.

My application has a grid and a dataview.
I can now drag images from the dataview into albums in the grid. That works, as explained in the example i mentioned above.
Now, I need to sort the images in the dataview based on a field in the store the DV uses.
I always imagined I would be able to sort the items in a DV based on a certain field and then at the end just solve the DnD riddle on top of that DV that would allow me to re-order the images inside it.
Now I'm not so sure :)

More to the point, is it posible to sort a DV? If yes, how would I go about handling DnD between a grid and a dataview and between the DV and the DV itself in the same time? Is that possible?

Thanks.

tubamanu
15 Sep 2009, 11:13 PM
hi,

i've done a drag drop functionality to 2 grids and also "moverow" funcitonality to one of those grids. finally u can drag and drop data from one to the other grid, and change the order by drag drop.......

drag drop in a dataview should be working.

http://www.extjs.com/forum/showthread.php?t=29122

for implementation, there are a lot of examples here.

U need to add a ddGroup name to your dataview and grid. allowContainer drop to your dataview.

after that, u implement a the drag drop functionality, what happens if an item is dropped in your dataview. u need to check, if the droped item is coming out of your dataview or your grid.....

cripkd
15 Sep 2009, 11:46 PM
I'm not sure I follow.
I was thinking of dragging and droping from a DV to itself.
And also I still am not sure that would serve anything if i can't re-order the items in it.

cripkd
16 Sep 2009, 12:48 AM
Ok, sorting belongs to the store. Thing is I added this to the store, tried both DESC and ASC and the images remain in the same order. Does the template matter? It's a simple div with float left.


sortInfo: {
field: 'image_id',
direction: 'DESC' // or 'DESC' (case sensitive for local sorting)
},

tubamanu
16 Sep 2009, 12:57 AM
i must say, i've never used any sorting combined with a store......
maybe sorting depends of the datatype u used for your attribute....
is image_id an string / int?

maybe u can do sorting server...

16 Sep 2009, 4:34 AM
I handle Drag and Drop with data views in Ext JS in Action, chapter 12.
Here's a direct link to the example:

http://extjsinaction.com/examples/chapter12/12.XX_dnd_with_dataviews.html

You can apply re-ordering, but you need to be able to detect the node being hovered over and the mouse coordinates.


An example of doing this with datagrids:

http://extjsinaction.com/examples/chapter12/12.2_dnd_with_grids.html

cripkd
17 Sep 2009, 3:02 AM
Thanks a lot!
Starting for the example that allows reordering of grid rows i managed to change it to allow DD only from right grid to left grid (and right grid reordering).
But when i drag from the right grid to the left grid i always get and empty element.
I don't even need as what I'm doing is assign a category (the row OVER which i'm dropping) to the image (the dropped image). So i don;t actually need to move anything from one grid ot the other. It's more like drag INTO :)
Anyone knows how to NOT create the new item?
Thanks.

17 Sep 2009, 3:07 AM
step through the code and you'll see where a record is being created/copied,etc.

cripkd
17 Sep 2009, 3:25 AM
Exactly.
I've also managed to differentiate between dropping in the same grid or in the other and treat the case accordingly.
Thanks.

F.o.b.
9 Nov 2009, 1:38 PM
For my application I need two dataviews with drag and drop function enabled.

Like J.Garcia do in the chapter 12 of his book (great book ;)), I've added it sucessfully and add a dinamic loading of left DV data with a combobox.

Now I've Three goals:

- How to cloning data without remove it on the left-side?
- I want to be able to delete from right DV (without re-drag to left-side) with a button.
- I want to be able to reorder the right side datawiew, or simply put in first place a selected item.

Any suggestion?

Sorry for my bad english!! :">

F.

cripkd
10 Nov 2009, 12:12 AM
For cloning data look in this example https://www.extjs.com/deploy/dev/examples/dd/dragdropzones.html , there is a cloneNode method used in there that i think you can do. I'm not sure that there isn't an even easier way, look into drop zone and drag zone config options for something relating to clone.

For deleting, that should be easy, use the DV selection model's methods to get selected nodes, get those nodes' indexes and delete from the store accordingly and then reload the store or something similar.

Reordering of dataview... hmm, i'm not sure about that. Actually i switched to a grid instead of a dataview so i can get better sorting.

tubamanu
10 Nov 2009, 12:22 AM
i've done this implementation for a project with DD functionality.
maybe u need to make some adjustments when creating dropping a item.

when trying to remove an item, u need to define a renderer in your CM (or what component u use). Maybe u can add a delete button.



yourGrid.on('render', function(grid) {
var secondGridDropTargetEl = grid.getView().scroller.dom;
var secondGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
ddGroup: 'rightGridDDGroup',
copy: false,
notifyDrop: function(ddSource, e, data){ // when droppping a container in the right grid
if (ddSource.grid != grid){
for(var a=0;a<data.selections.length;a++) { // if data is added by drag drop, add it to store, do not remove from store it comes
var item = data.selections[a].data;
var Rec = Ext.data.Record.create({name: 'unique_id'},{name: 'user_id'}, {name: 'text'}, {name: 'databaseId'});
grid.store.add(new Rec({unique_id: cf.userSecondTab.theUniqueId++, user_id: item.id,text: item.text, databaseId: ''})); // important to add unique ID's
}
}
else { // user is doing reorder, so only change values in the grid
var sm = grid.getSelectionModel();
var rows = sm.getSelections();
var cindex = ddSource.getDragData(e).rowIndex;
if (sm.hasSelection()) {
if(typeof(cindex) != "undefined") {
for (i = 0; i < rows.length; i++) {
grid.store.remove(grid.store.getById(rows[i].id));
grid.store.insert(cindex,rows[i]);
}
}
else { // when trying to move record to the end of the grid
var total_length = grid.store.data.length+1;
for (i = 0; i < rows.length; i++) {
grid.store.remove(grid.store.getById(rows[i].id));
}
grid.store.add(rows);
}
}
sm.clearSelections();
}
return true;
}
});
});

F.o.b.
12 Nov 2009, 12:58 PM
For cloning data look in this example https://www.extjs.com/deploy/dev/examples/dd/dragdropzones.html , there is a cloneNode method used in there that i think you can do. I'm not sure that there isn't an even easier way, look into drop zone and drag zone config options for something relating to clone.

For deleting, that should be easy, use the DV selection model's methods to get selected nodes, get those nodes' indexes and delete from the store accordingly and then reload the store or something similar.

Reordering of dataview... hmm, i'm not sure about that. Actually i switched to a grid instead of a dataview so i can get better sorting.

Now I'm able to removing from dataview, not to reorder (not yet), but i've another related question.

If this widget is in a formpanel how to post via Ajax correctly (I want to post the right dataview items with ids and they order..) ?

This is my script to post the rest of formpanel data.




formPanel.getForm().submit({
url: phpApplicationRoot+'/debug_risposta_positiva.php',
method: 'GET',
params: {
assegnatari: // <-- ??
},
success : gestioneRispostaNuovaChiamata,
failure : gestioneRispostaNuovaChiamata
});



I' tested to send store but this is not working right-side store is empty (in my case not empty because it has a default data)...

Tanks