Question

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

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

如果单击“编辑”，则应在所选树节点上显示一个文本框，并且可以重命名该文本框。

有什么想法吗？

谢谢，斯

Answer 1

使用Ext.Editor（查看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;
    // ...
  };
});

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 }
            ]
});

用于添加菜单项的操作

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

2 个答案: