JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css">

JavaScript

var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true,
        children: [
            { text: "detention", leaf: true },
            { text: "homework", expanded: true, children: [
                { text: "book report", leaf: true },
                { text: "alegrbra", leaf: true}
            ] },
            { text: "buy lottery tickets", leaf: true }
        ]
    }
});

var tree = Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    width: 200,
    height: 150,
    store: store,
    rootVisible: false,
    renderTo: Ext.getBody()
});
var editor = new Ext.Editor({
    field: {
        xtype: 'textfield'
    }
});
tree.menu = Ext.create('Ext.menu.Menu', {
  items: [
    // ...
    {text: 'Edit', action: 'edit'},
    // ...
  ]
});
tree.on('itemcontextmenu', function(view, record, HTMLTarget, i, e) {
  // Let's save record and HTMLTarget for further use
  tree.menu.record = record;
  tree.menu.HTMLTarget = HTMLTarget;

  tree.menu.showAt(e.getXY());
  e.preventDefault();
});
tree.menu.on('click', function(menu, item, e){
  if (!item) return;
  switch(item.action) {
    // ...
    case 'edit':
      editor.startEdit(Ext.get(menu.HTMLTarget), menu.record.get('text'));
      editor.on('complete', function(me, value) {
        this.record.set('text', value);
      }, menu, {single: true});
    break;
    // ...
  };
});