EXT tree如何在文本框中显示选中的节点的信息

需要实现 在一个<input type="text" id="tree"/>鼠标点击文本框 展示一个小窗口上面有一棵树，然后点击选中的节点，小窗口关闭，被选中节点的名称显示在文本框中。数据用json。
 
我现在在input中用onclick，打开一个iframe，iframe中显示出了这棵树，可是该怎么让这个节点的信息显示呢？求助。

解决方案 »

  1.   

    <ext:DropDownField ID="DropDownFieldBranch"  runat="server"  Editable="false" Width="300" TriggerIcon="Search">
                            <Component>
                             <ext:TreePanel ID="TreePanel4" runat="server" Height="230" Title="上级部门" UseArrows="true" AutoScroll="true" Animate="true">
                                    <Listeners>
                            <CheckChange Handler="this.dropDownField.setValue(getTasks(this), false);" />
                        </Listeners>
                                </ext:TreePanel>
                           </Component>
                            <Listeners>
                                <Expand Handler="this.component.getRootNode().expand(true);" Single="true" Delay="10" />
                            </Listeners>
                         </ext:DropDownField>方法在这
     var getTasks = function (tree) {
              var msg = [],
                    selNodes = tree.getChecked();
              msg.push("[");          Ext.each(selNodes, function (node) {
                  if (msg.length > 1) {
                      msg.push(",");
                  }              msg.push(node.data.text);
              });          msg.push("]");          return msg.join("");
          };
      

  2.   

    既然用了Ext，那为什么还要打开一个IFame这么麻烦？
    你要的功能适合用Ext.Window来做
    var treePan=New Ext.TreePanel({...});//你自己的tree
    var treeWnd=new Ext.Window({items:[treePan]});
    treePan.on('click',function(node){
      var obj=document.getElementById('tree');
      obj.value=node.text;
      treeWnd.hide();
    });
    在文本框的点击事件中写上：
    treeWnd.show();
    就ok了，当然还可以用treeWnd.setPosiontion(x,y)设置一下小窗体的位置,
    这样比用ifame好多了
      

  3.   


    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>无标题页</title>
                            <link type="text/css" href="/ext/resources/css/ext-all.css" rel="Stylesheet" />
                        <script type="text/javascript" src="/ext/ext-base.js"></script>
        <script type="text/javascript" src="/ext/ext-all.js"></script>
    </head>
    <script type="text/javascript">
    var treeWnd;
      Ext.onReady(function(){
        var json=[{text:'选项1',children:[{text:'选项11',leaf:true}]},{text:'选项2',leaf:true}];//你可以用自己的json
        var treePan=new Ext.tree.TreePanel({
           root:{text:'请选择',children:json}
        });
     treeWnd=new Ext.Window({items:[treePan],width:120,height:180,closeAction:'hide'});
    treePan.on('click',function(node){
      var obj=document.getElementById('tree');
      obj.value=node.text;
      treeWnd.hide();
    });  })
      function showTree()
      {
        treeWnd.show();
         var obj=document.getElementById('tree');
         treeWnd.setPosition(obj.offsetLeft,obj.offsetTop+28);
      }
    </script>
    <body>
        <form id="form1" runat="server">
        <div>
        <input id='tree' type="text" onclick="showTree();" style="margin-left:90px;margin-top:30px;" />
        </div>
        </form>
    </body>
    </html>代码测试了，注意改正确extjs文件的路径句可以了