EXT tree右键菜单实现修改节点名称

[size=medium]现在我想实现在树的节点上单击右键可以进行修改名称的功能!修改的方式就是单击右键修改名称 会使该树的节点变成可以编辑的状态 这样可以实现吗 具体代码如下:[/size]
var contentMenu=new Ext.menu.Menu({
id:'contentMenu',
items:[{text:'修改名称',handler:function(){
[color=red]//这里面应该怎么添加代码[/color]
}}
]
});
[b]问题补充:[/b]
你说的这种方法 我试过了 是不行的 没有任何反映 我想了下 本事其实是不行的
[b]问题补充:[/b]
看来我这种方法行不通啊 我想了下不知道js能不能实现自动双击节点 当点击修改名称按钮的时候 会自动双击节点 这样就可以对按钮进行编辑了!
[b]问题补充:[/b]
lhx222你没理解我的意思 我的意思是点击右键有一个修改名称这个菜单 然后再单击修改名称这个菜单 就会将该树节点变成可以编辑的状态!申明右键菜单我已经实现了的 呵呵 这个有点难吧

用鼠标点击节点名称,等0.5秒左右就可以出现编辑状态,然后直接修改后鼠标点击其其他地方让其实去焦点即可

用TreeEditor试试。。

[code="java"]
//这里面添加代码
treeEditer = new Ext.tree.TreeEditor(

tree,

{allowBlank: false}
);

treeEditer.on("beforestartedit", function(treeEditer){

var tempNode = treeEditer.editNode;//将要编辑的节点

if(tempNode.isLeaf()){

return true;

}else{

return false;

}

});

                                   treeEditer.on("complete", function(treeEditer){  
                                       alert(treeEditer.editNode.text);  
                                   });  [/code]

[code="javascript"]
...
//右键事件处理
var rightClickHandler = function(node,e)
{
e.preventDefault();
var cmOp;
node.select();
var contentMenu=new Ext.menu.Menu({
id:'contentMenu',
items:[{text:'修改名称',handler:function(){
//这里面应该怎么添加代码
}}
]
});
contentMenu.showAt(e.getXY());
}
isEmBodyParent = !node.leaf;
};
tree.on('contextmenu',rightClickHandler);
...
[/code]

不好意思,上面没写完,误操作了
[code="javascript"]
...

//右键事件处理

var rightClickHandler = function(node,e)

{

e.preventDefault();
//node.select();

var contentMenu=new Ext.menu.Menu({

id:'contentMenu',

items:[{text:'修改名称',handler:function(){

treeEditor.editNode = node;
treeEditor.startEdit(node.ui.textNode);
}}

]

});

contentMenu.showAt(e.getXY());

}
};

tree.on('contextmenu',rightClickHandler);

...
[/code]

[code="java"]
...

var treeEditor = new Ext.tree.TreeEditor(tree, {
    allowBlank: false
});

...
[/code]

其中tree就是的treePanel实例

[code="html"]



05.tree



<br> Ext.onReady(function(){</p> <pre><code>var tree = new Ext.tree.TreePanel({ el: &#39;tree&#39;, loader: new Ext.tree.TreeLoader({dataUrl: &#39;06-01.txt&#39;}) }); var treeEditor = new Ext.tree.TreeEditor(tree, { allowBlank: false }); </code></pre> <p>// treeEditor.on(&quot;beforestartedit&quot;, function(treeEditor){<br> // return treeEditor.editNode.isLeaf();<br> // });</p> <pre><code>//treeEditor.on(&quot;complete&quot;, function(treeEditor){ </code></pre> <p>//完成后alert被修改的节点的名称<br> // alert(treeEditor.editNode.text);<br> // });</p> <pre><code>var root = new Ext.tree.AsyncTreeNode({ id: &#39;0&#39;, text: &#39;我是根&#39; }); tree.setRootNode(root); tree.render(); root.expand(); </code></pre> <p>});<br>





[/code]

你把ext的样式和js改为你本地的试试,
其中06-01.txt的数据如下:
[code="txt"]
[
{text:'01',qtip:'01',children:[
{text:'01-01',qtip:'01-01',leaf:true},
{text:'01-02',qtip:'01-02',children:[
{text:'01-02-01',qtip:'01-02-01',leaf:true},
{text:'01-02-02',qtip:'01-02-02',leaf:true}
]},
{text:'01-03',qtip:'01-03',leaf:true}
]},
{text:'02',qtip:'02',leaf:true}
]
[/code]

使用这种方式的话你就不需要用右键菜单了