如何显示在旁边的树节点的文本输入的Ext JS 4
问题描述:
我能够创建一个树视图[使用EXTJS 4]与上下文菜单中的[选项添加,编辑,删除],如何显示在旁边的树节点的文本输入的Ext JS 4
所以,如果我右键点击在任何一个树节点上下文菜单将出现,
如果我点击“编辑”,文本框应该出现在选定的树节点,并能够重命名它。
任何想法?
感谢, 斯里兰卡
答
使用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;
// ...
};
});
答
检查这个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 }
]
});
它是添加操作菜单项
非常感谢@Molecule Man,那正是我在寻找的东西。现在我将根据您的建议更改代码。再次感谢:) – Srinivas
@Srinivas,给这个男人一个投票! (这是一个很好的回应,是吗?) – meorfi
@meorfi雅我尝试过,但我没有15声望点:( – Srinivas