grid-grid
grid-tree
grid-form
tree-tree
However compared with jQuery UI, there is not much detailed information about how to use drag-drop capabilities among any DOM elements and components using Ext
The most important source for this topic is the following sencha document:
http://docs.sencha.com/ext-js/4-0/#!/guide/drag_and_drop
For starters who just want to apply basic drag drop between a grid and any div element, you can follow the above steps:
1)Create a new grid. Besides of its required properties , this grid must have the following property:
viewConfig: {
forceFit: false,
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'gridDDGroup'
}
}
model fields: firstName,lastName
2)Add a div to your body.
< div id="droppablezone" style=" background-color: Gray;" >< / div >
The important one is its id name which we will use in third step.
3)Make your div a valid drop target:
Ext.create('Ext.dd.DropTarget', 'droppablezone', {
ddGroup: ' gridDDGroup ',
notifyDrop: function (ddSource, e, data) {
document.getElementById( e.target.id ).innerHTML += data.records[0].data.firstName;
},
notifyEnter: function (ddSource, e, data) {
}
});
First we create an Ext.dd.DropTarget of our 'droppablezone' id. For ddGroup property, we put the same value as grid's dragGroup property.
I put two listeners here:
notifyEnter: Whenever dragged item is in div's area, it is called. e
notifyDrop:When item is dropped in div's area, it is called. data is used to get dragged item's record. In my example I used record's model's firstName. I also used e parameter to show that you can get dropped target information via this parameter's target property.(you can just write 'droppablezone' instead of e.target.id)
You can apply similar structure to trees also.
