JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all.css">
JavaScript
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [{
name: 'task',
type: 'string'
}, {
name: 'user',
type: 'string'
}, {
name: 'duration',
type: 'string'
}]
});
var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
folderSort: true,
autoSync: true,
root: {
expanded: true,
task: 'Sliding Menu',
children: [{
task: 'Sliding Menu',
iconCls: 'task-folder',
expanded: true,
children: [{
task: 'Housewares',
iconCls: 'task-folder',
expanded: true,
children: [{
task: 'Kitchen supplies',
duration: 0.25,
leaf: true,
iconCls: 'task'
}, {
task: 'Groceries',
duration: 1.4,
leaf: true,
iconCls: 'task'
}, {
task: 'Cleaning supplies',
duration: 1.4,
leaf: true,
iconCls: 'task'
}, {
task: 'Office supplies',
duration: 1.2,
leaf: true,
iconCls: 'task'
}]
}]
}]
}
});
Ext.define('Forms', {
extend: 'Ext.data.Model',
fields: [{
name: 'task',
type: 'string'
}, {
name: 'user',
type: 'string'
}, {
name: 'duration',
type: 'string'
}]
});
var availableFormsStore = Ext.create('Ext.data.TreeStore', {
model: 'Forms',
folderSort: true,
root: {
expanded: true,
task: 'Sliding Menu',
children: [{
task: 'Sliding Menu',
iconCls: 'task-folder',
expanded: true,
children: [{
task: 'Housewares',
...