PDA

View Full Version : GroupingGrid Drag & Drop Target



sanantone
27 Oct 2010, 6:41 AM
I have two grouping grids in a panel and need to drag and drop multiple rows in either direction. The grids work but the dd proxy indicates there are no drop targets.

Any pointers would be really appreciated. I know this topic is common ('beaten to death' I think is the way Jay Garcia recently put it) but I've spent a couple days reading forum posts, all three ExtJS books etc. and clearly just don't GET IT! :"> I've seen a reference to a thread by Animal that might have the solution but I can't pull it up using his user and any obvious keywords...

Both grids are xtyped extensions of GridEdiorPanel

Example of right grid:


CPNR.grids.CollectionSamplesGrid = Ext.extend(Ext.grid.EditorGridPanel, {
enableDragDrop: true,
clicksToEdit: 1,
border: false,
loadMask: true,
stripeRows: true,
layout: 'fit',
sm: new Ext.grid.RowSelectionModel({
singleSelect: false
}),
view: new Ext.grid.GroupingView({
forceFit: true,
autoFill: true,
markDirty: true,
startCollapsed: false,
showGroupName: false,
hideGroupedColumn: true,
emptyGroupText: 'There are no collected items',
groupTextTpl: '{text} ({[values.rs.length]})'
}),
cm: new Ext.grid.ColumnModel({
columns: [
...
],
editors: {
...
},
getCellEditor: function(col, row){
...
}
}),
initComponent: function() {
this.store = this.buildStore();
CPNR.grids.CollectionSamplesGrid.superclass.initComponent.call(this);
},
buildStore: function(){
return {
xtype: 'collectionsamplesstore'
}
},
add: function(rec){
var store = this.store;
var sortInfo = store.sortInfo;

if (Ext.isArray(rec)){
Ext.each(rec, function(rObj, ind) {
if (! (rObj instanceof Ext.data.Record)){
rec[ind] = new this.store.recordType(rObj);
}
});
} else if (Ext.isObject(rec) && ! (rec instanceof Ext.data.Record)){
rec = new this.store.recordType(rec);
}

store.add(rec);
store.sort(sortInfo.field, sortInfo.direction);
},
loadData: function(d){
return this.store.loadData(d);
},
load: function(o){
return this.store.load(o);
},
removeAll: function(){
return this.store.removeAll();
},
remove: function(r){
return this.store.remove(r);
},
getSelected: function(){
return this.selModel.getSelections();
},
tools: [
...
],
fbar: {
...
}
});

Ext.reg("collectionsamplesgrid", CPNR.grids.CollectionSamplesGrid);


The code for the panel extension:



CPNR.grids.initDropZone = function(grid){
grid.dropTarget = grid.getView().mainBody;
grid.dropZoneEl = grid.getView().scroller.dom;
grid.dropZone = new Ext.dd.DropZone(grid.dropZoneEl, {
ddGroup: 'collectionDD',
getTargetFromEvent: function(){
return grid.dropTarget;
},
onNodeOver: function(){
return Ext.dd.DropZone.prototype.dropAllowed;
}
});
}

CPNR.panels.CollectionPanel = Ext.extend(Ext.Panel, {
layout: 'fit',
initComponent: function() {
this.items = [
{
xtype: 'container',
flex: 1,
layout: 'hbox',
layoutConfig: {
align: 'stretch'
},
items: [
{
xtype: 'collectionrulesgrid',
title: 'To Collect',
id: 'LeftGrid',
border: true,
flex: 1,
listeners: {
render: CPNR.grids.initDropZone
}
},
{
xtype: 'collectionsamplesgrid',
title: 'Already Collected',
id: 'RightGrid',
border: true,
flex: 1,
listeners: {
render: CPNR.grids.initDropZone
}
}
]
}
];
CPNR.panels.CollectionPanel.superclass.initComponent.call(this);
}
});

Ext.reg("collectionpanel", CPNR.panels.CollectionPanel);

sanantone
29 Oct 2010, 7:14 PM
Clearly was over analyzing the original problem :D

Solution:



CPNR.grids.GridDropZone = function(grid, config){
this.grid = grid;
CPNR.grids.GridDropZone.superclass.constructor.call(this, grid.view.scroller.dom, config);
}

Ext.extend(CPNR.grids.GridDropZone, Ext.dd.DropZone, {
onContainerOver: function(dd, e, data){
return dd.grid !== this.grid ? this.dropAllowed : this.dropNotAllowed;
},
onContainerDrop: function(dd, e, data){
if (dd.grid !== this.grid){
this.grid.store.add(data.selections);
this.grid.store.sort('sort_field', 'ASC');
Ext.each(data.selections, function(rowIdx) {
dd.grid.store.remove(rowIdx);
});
dd.grid.store.sort('sort_field', 'ASC');
this.grid.onRecordsDrop(dd.grid, data.selections);
return true;
} else{
return false;
}
},
containerScroll: true
});

CPNR.grids.CollectionSamplesGrid = Ext.extend(Ext.grid.EditorGridPanel, {
enableDragDrop: true,
clicksToEdit: 1,
border: false,
loadMask: true,
stripeRows: true,
layout: 'fit',
sortDef: [{field: 'sort_f1', direction: 'ASC' },{field: 'sort_f2', direction: 'ASC'}],
sm: new Ext.grid.RowSelectionModel({
singleSelect: false
}),
view: new Ext.grid.GroupingView({
forceFit: true,
autoFill: true,
markDirty: true,
startCollapsed: false,
showGroupName: false,
hideGroupedColumn: true,
emptyGroupText: 'There are no collected items',
groupTextTpl: '{text} ({[values.rs.length]})'
}),
cm: new Ext.grid.ColumnModel({
columns: [
...
],
editors: {
...
},
getCellEditor: function(col, row){
...
}
}),
initComponent: function() {
this.store = this.buildStore();
CPNR.grids.CollectionSamplesGrid.superclass.initComponent.call(this);
},
onRender: function(){
CPNR.grids.EventsCollectionSamplesGrid.superclass.onRender.apply(this, arguments);
this.dz = new CPNR.grids.GridDropZone(this, {ddGroup: this.ddGroup || 'GridDD'});
},
onRecordsDrop: function(source, records){
this.dropSource = source;
this.getStore().sort(this.sortDef);
},
buildStore: function(){
return {
xtype: 'collectionsamplesstore'
}
},
add: function(rec){
var store = this.store;
var sortInfo = store.sortInfo;

if (Ext.isArray(rec)){
Ext.each(rec, function(rObj, ind) {
if (! (rObj instanceof Ext.data.Record)){
rec[ind] = new this.store.recordType(rObj);
}
});
} else if (Ext.isObject(rec) && ! (rec instanceof Ext.data.Record)){
rec = new this.store.recordType(rec);
}

store.add(rec);
store.sort(sortInfo.field, sortInfo.direction);
},
loadData: function(d){
return this.store.loadData(d);
},
load: function(o){
return this.store.load(o);
},
removeAll: function(){
return this.store.removeAll();
},
remove: function(r){
return this.store.remove(r);
},
getSelected: function(){
return this.selModel.getSelections();
},
tools: [
...
],
fbar: {
...
}
});

Ext.reg("collectionsamplesgrid", CPNR.grids.CollectionSamplesGrid);