1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    2
    Vote Rating
    0
    Ute is on a distinguished road

      0  

    Default Answered: Which drag and drop events exist for a tree view panel?

    Answered: Which drag and drop events exist for a tree view panel?


    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'
    }
    }, ...
    }

  2. You should config to listen to beforedrop and drop events on TreeView not TreePanel.
    Code:
    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')
                }
            }
        }
    });

  3. #2
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    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/#!...ent-beforedrop and http://docs.sencha.com/ext-js/4-0/#!...rop-event-drop

  4. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    2
    Vote Rating
    0
    Ute is on a distinguished road

      0  

    Default The program does not jump in my BeforeDrop event handler.

    The program does not jump in my BeforeDrop event handler.


    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'
    }
    },
    }

  5. #4
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    You should config to listen to beforedrop and drop events on TreeView not TreePanel.
    Code:
    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')
                }
            }
        }
    });

Thread Participants: 1

Tags for this Thread