PDA

View Full Version : Drag and drop isn't working after code refractoring



kornicameister
31 Aug 2012, 12:50 AM
Recently I have ported some of my code to MVC-like architecture and I couldn't help to notice that my drag&drop between grid stopped working, although all that really had changed are:
- host container layout
- way to create new object, now using lazy instantiation (xtypes)

all the rest is the same.

I can drag a record from one grid, but it looks like the other grid is not a valid target.
Here some code chunks:


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

Ext.extend(GridDropZone, Ext.dd.DropZone, {
onContainerOver: function (dd, element, data) {
return dd.grid !== this.grid ? this.dropAllowed : this.dropNotAllowed;
},


onContainerDrop: function (dd, element, data) {
if (dd.grid !== this.grid) {
this.grid.fireEvent('recorddropped', dd.grid, data.selections);
return true;
} else {
return false;
}
}
});

ns.GridView = Ext.extend(Ext.grid.GridPanel, { initComponent: function () {
ns.GridView.superclass.initComponent.call(this);


if (Ext.isDefined(this.initialConfig.columns)) {
var columns = this.initialConfig.columns;
Ext.each(columns, function (column) {
column.sortable = true;
column.width = 90;
});
}


this.addEvents(
/**
* @event recordDropped
* fired for every record dropped on grid
*/
'recorddropped'
);


Ext.apply(this, {
multiSelect : true,
autoScroll : true,
frame : false,
enableDragDrop: true,
columns : columns
});
},


getSelectedRecords: function () {
return this.selModel.getSelections();
},


refresh: function () {
this.getView().refresh();
},


onRender: function () {
ns.GridView.superclass.onRender.apply(this, arguments);


if (this.enableDragDrop) {
this.dropZone = new GridDropZone(this, {
ddGroup: this.ddGroup || 'DDGroup'
});
}
}
});
Ext.reg('pgridview', ns.GridView);


and creating exemplary object using ns.GridView

Ext.create({
xtype : 'ppanel', //forces usage of border layout and defines defaults
title : 'Roles',
items : {
xtype : 'pgridview',
emptyText : 'No data.',
store : storeRef,
region : 'center',
columns : [
{
header : 'Data',
dataIndex: 'data'
}
],
viewConfig: {
forceFit: true
}
}
}
)