On an ExtJS drag and drop tree using the drop or beforedrop listeners dont seem to fire

2
votes

I have a tree in extjs. I've added the drag and drop plugin and those function fine in the browser but I need to send the dragged and drop change to my DB correct? To do this I believe I should listen for the drop event then make an ajax call to my back end. I have a checkchange event that fires OK but a drop or beforedrop even seem to do nothing.

Here is my tree's config, what am I doing wrong?

todotree = {
    title: 'Tree Grid',
    width: 600,
    height: 400,
    viewConfig: {
        plugins: {
            ptype: 'treeviewdragdrop'
        }
    },
    store: new Ext.data.TreeStore({
        storeId: 'treestore',
        fields: [{
            name: 'actionTitle',
            type: 'string'
        }],
        proxy: {
            type: 'ajax',
            url: 'index.php/todo/listtree',
            reader: 'json'
        }
    }),
    rootVisible: false,
    columns: [
    {
        xtype: 'treecolumn',
        text: 'Title',
        flex: 3,
        dataIndex: 'actionTitle'
    }],
    listeners: {
        checkchange: function(node, checked){
            Ext.Ajax.request({
                url: 'index.php/todo/togglecheck/' + node.data.recordId + '/' + checked,
                success: function() {}
            });
        },
        drop: function(){ alert("drop") },
        beforedrop: function(){ alert("beforedrop") }
    }
}

Thanks in advance

EDIT: I also tried this config to no avail. I don't think I understand how this is all supposed to work.

...
    beforedrop: function(node, data, overModel, dropPosition, dropFunction){
        alert("beforedrop");

        dropFunction = function(){
            alert('dropFunction');
        };
    }
...
1
extjsdrag-and-droptreelistener

1 Answers

5
votes

Those events are fired by the TreeView and you are adding the listeners on the Panel. This should work:

todotree = {...
    viewConfig: {
        listeners: {
            beforedrop: function () {}
        }
    }
}