ExtJS4 Tree to Grid Drag Drop

by Zonedark

HTML

<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css">
<div id="panel"></div>

JavaScript

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

Ext.onReady(function() {

  var myData = [{
    name: "T0001",
    type: "BUFFY COAT"
  }, {
    name: "T0098",
    type: "BUFFY COAT"
  }, {
    name: "E0001",
    type: "BUFFY COAT"
  }, {
    name: "E0001",
    type: "BUFFY COAT"
  }, {
    name: "E0001",
    type: "RLT+"
  }, {
    name: "E0001",
    type: "ADN"
  }, {
    name: "E0001",
    type: "ADN"
  }, {
    name: "Rec 7",
    type: "ARN"
  }, {
    name: "Rec 8",
    type: "ARN"
  }, {
    name: "Rec 9",
    type: "RLT"
  }];

  // create the data store
  var firstGridStore = Ext.create('Ext.data.Store', {
    model: 'Apps.demo.model.Resource',
    autoLoad: true,
    proxy: {
      type: 'ajax',
      url: '/echo/json/',
      actionMethods: {
        read: 'POST'
      },
      extraParams: {
        json: Ext.JSON.encode(myData)
      },
      delay: 0
    }
  });
  // Column Model shortcut array
  var columns = [{
    text: "Name",
    flex: 1,
    sortable: true,
    dataIndex: 'name'
  }, {
    text: "Type",
    width: 70,
    sortable: true,
    dataIndex: 'type'
  }];

  // declare the source Grid
  var firstGrid = Ext.create('Ext.grid.Panel', {
    viewConfig: {
      plugins: {
        ptype: 'gridviewdragdrop',
        ddGroup: 'selDD'
      },
      listeners: {
        drop: function(node, data, dropRec, dropPosition) {
					alert('nope');
        }
      }
    },
    store: firstGridStore,
    columns: columns,
    stripeRows: true,
    title: 'First Grid',
    margins: '0 2 0 0'
  });

  // create the destination Grid
  var secondTree = Ext.create('Apps.demo.view.TreeGrid', {
    viewConfig: {
      plugins: {
        ptype: 'treeviewdragdrop',
        ddGroup: 'selDD'
      },
      listeners: {
        beforedrop: function(node, data) {
         data.records[0].set('leaf', true);
         data.records[0].set('checked', null);
          //data.records[0].set('leaf', true);
          //data.records[0].set('checked', null);
 ...