PDA

View Full Version : Which drag and drop events exist for a tree view panel?



Ute
16 Apr 2012, 11:50 PM
My problem concerns dragging & dropping nodes of a tree view panel.
I want to implement an ajax call after a user has drag and drop the node of a tree view.
Which events fire during drag and drop or are there a functions for overriding? How they are defined?Sorry, I'm new in EXT JS.This is our Tree Panel definition:
treePanel = Ext.create('Ext.tree.Panel', {
renderTo: 'our-tree',
height:600,
columns: [{
xtype: 'treecolumn',
text: 'Name',
dataIndex: 'text',
width: 300
},{
text: 'Description',
dataIndex: 'desc',
width: 500
}],
listeners: {
checkchange: function(node, checked, options) {
if(checked) var ajaxRequest = ...
}, ..
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
}
}, ...
}

vietits
17 Apr 2012, 12:25 AM
TreeViewDragDrop fires two events through the TreeView. They are beforedrop and drop. You can refer to these here: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tree.plugin.TreeViewDragDrop-event-beforedrop and http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tree.plugin.TreeViewDragDrop-event-drop

Ute
20 Apr 2012, 4:10 AM
Thanks for your answers. However, the program does not jump in my BeforeDrop event handler. What is wrong?
This is our Tree Panel definition:
treePanel = Ext.create('Ext.tree.Panel', {
renderTo: 'our-tree',
height:600,
columns: [{
xtype: 'treecolumn',
text: 'Name',
dataIndex: 'text',
width: 300
},{
text: 'Description',
dataIndex: 'desc',
width: 500
}],
listeners: {
beforedrop: function(node, data, overModel, dropPosition, dropFunction, eOpts ) {
var ajaxRequest= new htmldb_Get(..); ..
}
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
}
},
}

vietits
20 Apr 2012, 5:02 AM
You should config to listen to beforedrop and drop events on TreeView not TreePanel.


var treePanel = Ext.create('Ext.tree.Panel', {
renderTo: 'our-tree',
height:600,
columns: [{
xtype: 'treecolumn',
text: 'Name',
dataIndex: 'text',
width: 300
},{
text: 'Description',
dataIndex: 'desc',
width: 500
}],
// listeners: {
// beforedrop: function(node, data, overModel, dropPosition, dropFunction, eOpts ) {
// var ajaxRequest= new htmldb_Get(..); ..
// }
// },
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
},
listeners: {
beforedrop: function(node, data, overModel, dropPosition, dropFunction, eOpts ) {
console.log('beforedrop')
}
}
}
});