PDA

View Full Version : Grid Cell Drag Drop



illuminum
21 Jun 2008, 12:53 PM
This is one of the most convoluted things I've ever written, but I couldn't find any pre-existing extensions or plugins that did what I wanted so I figure it can't hurt to release some raw code here for some future person to refactor or examine if they have the same objective.

live url:
http://98.212.231.100/pim/


my app's grid dd plugin


PIM.prototype.DDGridPanel = function(config) {
this.config = config;
}
Ext.extend(PIM.prototype.DDGridPanel,Ext.util.Observable,{
init: function(c) {

Ext.apply(c, this.config);
var ddText = new Array;
var ddString = ddText[0]+': '+ddText[1];
var ddSource = (c.targetGrid)?true:false;
Ext.dd.DragDropMgr.stopPropagation = false;
Ext.apply(c, {
enableDragDrop: true, // ?
dropConfig: { // ?
appendOnly: true
},
ddGroup: (ddSource)?'GridDD':'GridDD2'
});
if (ddSource) {
Ext.apply(c, {
onRender: c.onRender.createInterceptor(function() {
//console.log(arguments);
return true;
}).createSequence(function(ct) {
//console.log(c,ct);
c.addListener({
cellmousedown: {
fn: function(grid,row,column,e) {
var view = grid.getView();
if ((row !== false) && (column !== false)) {
var store = grid.getStore();
var cm = grid.getColumnModel();
var record = store.getAt(row);
var field = cm.getDataIndex(column);
var datum = record.get(field);
var cell = Ext.get(view.getCell(row,column));
grid.getSelectionModel().clearSelections();
// Grid 1 -> Grid 2
var ddrow = new Ext.dd.DropTarget(c.targetGrid.getEl(), {
ddGroup: "GridDD",
notifyEnter: Ext.dd.DropTarget.prototype.notifyEnter.createInterceptor(function(dd,e,data){
ddText[0] = c.targetGrid.title+': ';
ddString = ddText[0] + ddText[1];
var proxy = dd.getProxy();
proxy.update(ddString);
},c),
notifyOut: Ext.dd.DropTarget.prototype.notifyOut.createSequence(function(dd,e,data) {
ddText[0] = grid.title+': ';
ddString = ddText[0] + ddText[1];
var proxy = dd.getProxy();
proxy.update(ddString);
}),
notifyOver: Ext.dd.DropTarget.prototype.notifyOver.createSequence(function(dd,e,data) {
}),
notifyDrop : function(dd, e, data){
var proxy = dd.getProxy();
proxy.hide();
var target = Ext.lib.Event.getTarget(e);
var targetRow = c.targetGrid.getView().findRowIndex(target);
var targetCell = Ext.get(c.targetGrid.getView().getCell(targetRow,column));
c.targetGrid.getStore().getAt(row).set(field,datum);
c.targetGrid.getView().refresh();
}
});
}
}.createInterceptor(function(grid,row,column,e) {
var store = grid.getStore();
var cm = grid.getColumnModel();
var record = store.getAt(row);
var field = cm.getDataIndex(column);
var datum = record.get(field);
ddText[0] = grid.title+': ';
ddText[1] = grid.getStore().getAt(row).get(field);
ddString = ddText[0] + ddText[1];
Ext.apply(c,{ddText: ddString});
c.initComponent();
})
}
});
})
});
}
c.initComponent();
}
});


context


var client = new Ext.grid.EditorGridPanel({
plugins: [
new PIM.prototype.ClientGridPanel({
ds: clientStore[group],
cm: cmArray
}),
new PIM.prototype.DDGridPanel({
})
]
});
var stage = new Ext.grid.GridPanel({
plugins: [
new PIM.prototype.StageGridPanel({
ds: stageStore[group],
cm: cmArray
}),
new PIM.prototype.DDGridPanel({
targetGrid: client
})
]
});



more context


PIM.prototype.StageGridPanel = function(config) {
this.config = config;
this.init = function(c) {
Ext.apply(this.config, {
title: 'Stage Records',
border: false,
height: 200,
stripeRows: true,
view: new Ext.grid.GridView({
forceFit: true,
enableRowBody: true, // ?
showPreview: true, // ?
getRowClass : function(record, rowIndex, p, store){
if(this.showPreview) {
p.body = '<p></p>';
return 'x-grid3-row-expanded';
} else
return 'x-grid3-row-collapsed';
}
}),
autoScroll: true, // ?
bbar: new Ext.Toolbar({
items: [{
xtype: 'tbfill'
},{
type:'reset', text: 'Reset', disabled: true
},{
text: 'Transfer All', disabled: true
}]
})
});
//this.config.sm = new Ext.grid.RowSelectionModel({singleSelect:true});
if (this.config.cm && this.config.cm instanceof Array) {
this.config.cm = new Ext.grid.ColumnModel(this.config.cm);
}
Ext.apply(c, this.config);
c.initComponent();
};
};

JamesC
21 Jun 2008, 6:18 PM
Strangely enough I found myself coding a CellDDGridPanel a few weeks ago... I did it a slightly different way by extending GridPanel & GridView and then creating a CellDDGridDragZone & DropZone to faciliate the drag & drop. I will post it if I get time to finish tweaking it...

tariq
20 May 2010, 1:47 AM
James.... would you please post your code here..