Question

I was able to create a tree view [using EXTJS 4 ] with context menu[options are add,edit,delete],

So if i right click on any of tree node context menu will appear,

If i click “Edit”, a text box should appear at the selected tree node and able to rename it.

Any ideas ?

Thanks,
Sri

Answer 1

use Ext.Editor (check out this demo):

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;
    // ...
  };
});