JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://extjs.cachefly.net/ext-4.1.1-gpl/resources/css/ext-all-debug.css">
<script src="http://extjs.cachefly.net/ext-4.1.1-gpl/ext-all-debug.js"></script>
JavaScript
Ext.onReady(function() {
// define model for tree
Ext.define('Category', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'parentCatId', type: 'int' },
{ name: 'name', type: 'string' }
]
});
// define model for grid
Ext.define('Bookmark', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'catId', type: 'int' },
{ name: 'title', type: 'string' },
{ name: 'url', type: 'string' }
]
});
// Create the tree-panel
var catTree = Ext.create('Ext.tree.Panel', {
itemId: 'catTree',
title: 'Categories',
flex: 0.5,
hideHeaders: true,
rootVisible: false,
allowDeselect: true,
droppedRecords: undefined,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
dropGroup: 'bkmDDGroup',
enableDrag: false,
appendOnly: true
},
listeners: {
beforedrop: function(node, data, overModel, dropPos, opts) {
this.droppedRecords = data.records;
data.records = [];
},
drop: function(node, data, overModel, dropPos, opts) {
var str = '';
Ext.iterate(this.droppedRecords, function(record) {
str += record.get('title') + ' (id = ' + record.get('id') + ') dropped on ' + overModel.get('name') + '\n';
});
alert(str);
this.droppedRecords = undefined;
}
}
},
store: Ext.create('Ext.data.TreeStore', {
model: 'Category',
proxy: {
...