拖放在ExtJS TreeGrid中

Question

我想在ExtJS TreeGrid中實現拖放節點。我能夠填充TreeGrid，但不知道如何處理拖放。這裏是我的ExtJS的代碼填充的TreeGrid：

Ext.require([ 
    'Ext.data.*', 
    'Ext.grid.*', 
    'Ext.tree.*' 
]); 

Ext.onReady(function() { 
    Ext.define('Task', { 
     extend: 'Ext.data.Model', 
     fields: [ 
      { name: 'task', type: 'string' }, 
      { name: 'assignedto', type: 'string' } 
     ] 
    }); 

    var store = Ext.create('Ext.data.TreeStore', { 
     model: 'Task', 
     proxy: { 
      type: 'ajax', 
      url: 'treegrid.json' 
     }, 
     folderSort: false 
    }); 

    var tree = Ext.create('Ext.tree.Panel', { 
     title: 'Core Team Projects', 
     width: 500, 
     height: 300, 
     renderTo: Ext.getBody(), 
     collapsible: true, 
     useArrows: true, 
     rootVisible: false, 
     store: store, 
     multiSelect: true, 
     singleExpand: true, 
     columns: [{ 
      xtype: 'treecolumn', 
      text: 'Task', 
      flex: 2, 
      sortable: true, 
      dataIndex: 'task' 
     }, { 
      text: 'Assigned To', 
      flex: 1, 
      dataIndex: 'assignedto', 
      sortable: true 
     }] 
    }); 

以下是示例JSON數據：

{"text":".","children": [ 
    { 
     task:'Task: R&D',  
     assignedto:'Reserved Team', 
     iconCls:'task-folder', 
     expanded: true, 
     children:[{ 
      task:'Grid', 
      duration:1.25, 
      assignedto:'Gopal Kanjoliya', 
      iconCls:'task-folder', 
      children:[{ 
       task:'Create', 
       duration:0.25, 
       assignedto:'Gopal Kanjoliya', 
       leaf:true, 
       iconCls:'task' 
      },{ 
       task:'Read', 
       duration:.4, 
       assignedto:'Gopal Kanjoliya', 
       leaf:true, 
       iconCls:'task' 
      }] 
     }, { 
      task:'Tree', 
      duration:12, 
      assignedto:'Gopal Kanjoliya', 
      iconCls:'task-folder', 
      expanded: true, 
      children:[{ 
       task:'Add Node', 
       duration: 2.75, 
       assignedto:'Gopal Kanjoliya', 
       iconCls:'task-folder', 
       children: [{ 
        task: 'Delete', 
        duration: 1.25, 
        assignedto: 'Gopal Kanjoliya', 
        iconCls: 'task', 
        leaf: true 
       }] 
      },{ 
       task:'Form', 
       duration:2.75, 
       assignedto:'Gopal Kanjoliya', 
       leaf:true, 
       iconCls:'task' 
      }] 
     }] 
    },{ 
     task:'Task: Implementation', 
     duration:2, 
     assignedto:'Development Team', 
     iconCls:'task-folder', 
     children:[{ 
      task: 'Forms', 
      duration: 0.75, 
      assignedto: 'Gopal Kanjoliya', 
      iconCls: 'task-folder', 
      children: [{ 
       task: 'Grids', 
       duration: 0.25, 
       assignedto: 'Gopal Kanjoliya', 
       iconCls: 'task', 
       leaf: true 
      }] 
     },{ 
      task: 'Components', 
      duration: 3.75, 
      assignedto: 'Shyam Dhanotiya', 
      iconCls: 'task-folder', 
      children: [{ 
       task: 'Panels', 
       duration: 0.25, 
       assignedto: 'Shyam Dhanotiya', 
       iconCls: 'task', 
       leaf: true 
      }] 
     },{ 
      task: 'Test', 
      duration: 0.5, 
      assignedto: 'Snehil Chaturvedi', 
      iconCls: 'task-folder', 
      children: [{ 
       task: 'Manual', 
       duration: 0.25, 
       assignedto: 'Snehil Chaturvedi', 
       iconCls: 'task', 
       leaf: true 
      }] 
     }] 
    } 
]} 

Answer 1

ExtJS的有這一個很好的插件： http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.tree.plugin.TreeViewDragDrop 閱讀CONFIGS，他們具有相當的重要和有用的

只是把這個在您的TreePanel中的代碼：

viewConfig: { 
     plugins: { 
      ptype: 'treeviewdragdrop' 
     } 
    }, 

而且，這裏是工作提琴 我只是把一些隨機數據的存儲，不想格式化所有你

Ext.onReady(function() { 

Ext.define('Task', { 
    extend: 'Ext.data.Model', 
    fields: [ 
     { name: 'task', type: 'string' }, 
     { name: 'assignedto', type: 'string' } 
    ] 
}); 

var store = Ext.create('Ext.data.TreeStore', { 
    model: 'Task', 
    folderSort: false, 
    root: { 
     expanded: true, 
     children: [ 
      { 
       task: 'Child 1', 
       assignedto: 'me', 
       leaf: true 
      }, 
      { 
       task: 'Child 2', 
       assignedto: 'me', 
       expanded: true, 
       children: [ 
        { 
         task: 'GrandChild 1', 
         assignedto: 'you', 
         leaf: true 
        } 
       ] 
      }, 
      { 
       task: 'Child 3', 
       assignedto: 'me', 
       expanded: true, 
       children: [ 
        { 
         task: 'GrandChild 2', 
         assignedto: 'you', 
         leaf: true 
        } 
       ] 
      }, 
     ] 
    } 
}); 

var tree = Ext.create('Ext.tree.Panel', { 

    viewConfig: { 
     plugins: { 
      ptype: 'treeviewdragdrop' 
     } 
    }, 

    title: 'Core Team Projects', 
    width: 500, 
    height: 300, 
    renderTo: Ext.getBody(), 
    collapsible: true, 
    useArrows: true, 
    rootVisible: false, 
    store: store, 
    multiSelect: true, 
    singleExpand: true, 
    columns: [{ 
     xtype: 'treecolumn', 
     text: 'Task', 
     flex: 2, 
     sortable: true, 
     dataIndex: 'task' 
    }, { 
     text: 'Assigned To', 
     flex: 1, 
     dataIndex: 'assignedto', 
     sortable: true 
    }] 
}); 
});