extjs 4 drag-n-drop between 2 grids without plugin? - ruby-on-rails-3

Question

I am implementing Extjs 4 ( MVC) example given here with rails 3.x.
I have the following structure:
in Public dir,
Manager
-> mainapp
- controller
-> Dragdrops.js
- model
-> Dragdrop.js
- store
-> FirstDragdrops.js
-> SecondDragdrops.js
- view
-dragdrop
-> DragdropList.js
View ( DragdropList.js ) has a panel that contains 2 grids.
/* -- View - Drag n Drop list grid -- */
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.dd.*'
]);
Ext.define('mainapp.view.dragdrop.DragdropList', {
extend: 'Ext.panel.Panel',
alias : 'widget.dragdroplist',
title : 'Drag Drop List',
layout: 'hbox',
initComponent: function() {
this.items = [
{
xtype: 'grid',
title: 'First Grid',
id: 'firstgrid',
store: 'FirstDragdrops',
flex: 1, enableDragDrop : true,
ddGroup: 'mydd',
ddText: 'Shift Row',
columns : [
{text: "Item Name", sortable: true, dataIndex: 'name'},
{text: "Quantity", sortable: true, dataIndex: 'qty'},
{text: "Amount", sortable: true, dataIndex: 'amt'}
],
singleSelect:true,
listeners: {
beforerowselect: function(sm,i,ke,row){
//grid.ddText = title_str(row.data.title, null, row);
},
selectionchange: function(){
alert("Row Selected! " + this.ddText);
//grid.ddText(row.data.title, null, row);
}
}
},
{
xtype: 'grid',
title: 'Second Grid',
id: 'secondgrid',
store: 'SecondDragdrops',
flex: 2,
singleSelect: true,
enableDragDrop : true,
stripeRows: true,
columns : [
{text: "Item Name", sortable: true, dataIndex: 'name'},
{text: "Quantity", sortable: true, dataIndex: 'qty'},
{text: "Amount", sortable: true, dataIndex: 'amt'}
]
}
]
this.callParent(arguments);
}
});
But I m not able to implement the drag and drop functionality in extjs 4 (WITHOUT PLUGIN).
Any suggestions??

Answer 1

I think this is not perfect way, but it works in my project:
Add listener to elements you want to drag or/adn drop:
listeners: {
render: initializeDD
}
Implement d&d configuretaion method (reordering of components in my case):
function initializeDD (v) {
var el = Ext.get(v.getEl().id);
el.on('dblclick', function() {
var component = Ext.ComponentManager.get(v.getEl().id).getComponent(0);
component.focus();
}, this);
v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
ddGroup: 'blankAttsReorder',
getDragData: function(e) {
var sourceEl = e.getTarget(v.itemSelector, 10), d;
if (sourceEl) {
d = sourceEl.cloneNode(true);
d.id = Ext.id();
return v.dragData = {
sourceEl: sourceEl,
repairXY: Ext.fly(sourceEl).getXY(),
ddel: d,
originalid: v.getEl().id
};
}
},
getRepairXY: function() {
return this.dragData.repairXY;
}
});
v.dropZone = Ext.create('Ext.dd.DropZone', v.el, {
ddGroup: 'blankAttsReorder',
getTargetFromEvent: function(e) {
return e.getTarget('.blankbuilder-attribute');
},
onNodeOver : function(target, dd, e, data){
// specific code there
var targetN = Ext.Array.indexOf(blank.items, Ext.ComponentManager.get(target.id), 0);
var sourceN = Ext.Array.indexOf(blank.items, Ext.ComponentManager.get(data.originalid), 0);
if (targetN!=sourceN) {
blank.move(sourceN, targetN);
}
return Ext.dd.DropZone.prototype.dropAllowed;
},
onNodeDrop : function(target, dd, e, data){
Ext.ComponentManager.get(target.id).getComponent(0).blur();
}
});
}
P. S. Example of drag one type of components to another type of components (contain some project specific code):
function initializeAttributeDragZone (v) {
v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
ddGroup: 'attsToBlank',
getDragData: function(e) {
var sourceEl = e.getTarget(v.itemSelector, 10), d;
if (sourceEl) {
d = sourceEl.cloneNode(true);
d.id = Ext.id();
return v.dragData = {
sourceEl: sourceEl,
repairXY: Ext.fly(sourceEl).getXY(),
ddel: d,
attributeData: v.getRecord(sourceEl).data
};
}
},
getRepairXY: function() {
return this.dragData.repairXY;
}
});
}
// Добавляем возможность дропать атрибуты из списка на бланк
function initializeBlankDropZone (v) {
v.dropZone = Ext.create('Ext.dd.DropZone', v.el, {
ddGroup: 'attsToBlank',
getTargetFromEvent: function(e) {
return e.getTarget('.blankbuilder-attribute-new');
},
onNodeEnter : function(target, dd, e, data){
Ext.fly(target).addCls('blankbuilder-attribute-new-hover');
},
onNodeOut : function(target, dd, e, data){
Ext.fly(target).removeCls('blankbuilder-attribute-new-hover');
},
onNodeOver : function(target, dd, e, data){
return Ext.dd.DropZone.prototype.dropAllowed;
},
onNodeDrop : function(target, dd, e, data){
// some code
}
});
}