如何在 ext js 4 中在树节点旁边显示文本输入

Question

我能够创建一个树视图 [使用 EXTJS 4 ] 和上下文菜单 [选项有添加、编辑、删除]，

因此，如果我右键单击任何树节点上下文菜单，将会出现，

如果我单击“编辑”，则会出现一个文本框应出现在选定的树节点处并能够对其进行重命名。

有什么想法吗？

谢谢， 斯里

Answer 1

使用 Ext.Editor< /a> （查看此演示）：

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

Answer 2

检查这个 http://www.sencha.com/forum /showthread.php?2430-TreePanel-with-Context-Menu

function onItemClick(item){
        console.info('You clicked: '+ item.text);
    }   

...

var menuC = new Ext.menu.Menu({ id: 'mainContext', items: [
            { text: 'edit', handler: onItemClick } , { text: 'delete', handler: onItemClick }
            ]
});

用于为菜单项添加操作