PDA

View Full Version : Drag record off panel to remove it from store



cnesbit
6 Apr 2010, 8:08 AM
I would like to be able to drag a record off a specific grid to remove that record, and I'm having issues accomplishing this. This particular grid happens to be the DropTarget of another grid though.

So basically:


Grid1 has a list to choose from
Grid2 is where my "changing" data.store is
Records from Grid1 can be DnD'ed to Grid2 to be added to the "changing" store
Records can be deleted from grid2 by dragging them off Grid2


The item is red is the only one not working. I'm able to make records successfully get deleted from Grid2 if I drag them back to Grid1, but given the context of my web page that doesn't make sense from a user standpoint. I'd much rather allow the user to simply drag records off Grid2 to remove them regardless of what they drop them on.

Any Ideas?

I'm sure you're gonna ask me for some code, so here's what I've got, for bullet point #3:


//Grid2's render event, where the variable "grid" is my Grid2
render: function(grid){

var secondGridDDGroup = new Ext.dd.DropTarget(grid.getView().scroller.dom, {
ddGroup : 'secondGridDDGroup',
ignoreSelf: false,
notifyOver : function(ddSource, e, data){
console.log(ddSource, data, 'notifyOver');
for (i = 0; i < data.selections.length; i++) {
var rec = data.selections[i];
if (rec.data.studentid != undefined) { //if record came from Grid2 (itself)
console.log(this.dropNotAllowed);
return this.dropNotAllowed;
}
}
return this.dropAllowed; //record must have come from Grid1 :)
},
notifyDrop : function(ddSource, e, data){
var records = ddSource.dragData.selections;
// call my custom function to add Grid1's record to Grid2
Ext.each(records, Ext.getCmp('mealsStudentGrid').addItem, grid);
return true;
}
});

}

cnesbit
9 Apr 2010, 5:45 AM
has nobody ever done this sort of thing before?

tubamanu
9 Apr 2010, 5:55 AM
i've done something similar some time ago.
I used 2 grids and implemented drag and drop functionality.

i've implemented grid 1 with a columnmodel and store, that contains my data for drag & drop.
U must set enableDragDrop:true and define ddGroup.


Grid 2 also contains a store and CM and Ext.dd.DropTarget is added. in the notifyDrop method, i implemented the functionality what happens when moving a item from grid1 to grid2.....sounds complicated...but it isnt^^



My Grid1:


/** left usergrid **/
initUserGrid: function () {
this.theUserGrid = new Ext.grid.GridPanel({
frame:false,
autoScroll: true,
collapsible:false,
closable: false,
ddText: '<?php echo __('Move right please',null,'usermanagement'); ?>',
title: '<table><tr><td><img src="/images/icons/user_suit.png" /></td><td><?php echo __('User',null,'usermanagement'); ?></td></tr></table>',
height: 460,
width:290,
border: true,
style: 'margin-right:20px;',
ddGroup : 'rightGridDDGroup',
plain: false,
enableDragDrop:true,
expand: true,
store: this.theUserStore,
tbar: this.theUserToolbar,
cm: this.theUserCM
});
},

/** store for left grid **/
initUserStore: function () {
this.theUserStore = new Ext.data.JsonStore({
root: 'result',
url: '<?php echo build_dynamic_javascript_url('usermanagement/LoadUserGrid')?>',
fields: [
{name: 'id'},
{name: 'text'}
]
});
cf.userSecondTab.theUserStore.load();
},


Grid 2:



/** right grid **/
initUserAgentGrid: function () {
this.theUserAgentGrid = new Ext.grid.GridPanel({
frame:false,
autoScroll: true,
collapsible:false,
closable: false,
ddGroup : 'rightGridDDGroup',
allowContainerDrop : true,
ddText: '<?php echo __('Drag Drop to change order',null,'usermanagement'); ?>',
title: '<table><tr><td><img src="/images/icons/user_gray.png" /></td><td><?php echo __('Useragent',null,'usermanagement'); ?></td></tr></table>',
height:'false',
width:290,
height: 460,
border: true,
plain: false,
autoHeight : false,
stripRows: true,
enableDragDrop:true,
store: this.theUserAgentStore,
tbar: this.theUserAgentToolbar,
cm: this.theUserAgentCM
});

this.theUserAgentGrid.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 from left grid, add it to store.
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 { // if data is coming from right, then reorder is done.
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 add data 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;
}
});
});
},