当前位置: 代码迷 >> JavaScript >> EXT tree怎么在文本框中显示选中的节点的信息
  详细解决方案

EXT tree怎么在文本框中显示选中的节点的信息

热度:143   发布时间:2012-07-31 12:33:47.0
EXT tree如何在文本框中显示选中的节点的信息
需要实现 在一个<input type="text" id="tree"/>鼠标点击文本框 展示一个小窗口上面有一棵树,然后点击选中的节点,小窗口关闭,被选中节点的名称显示在文本框中。数据用json。
 
我现在在input中用onclick,打开一个iframe,iframe中显示出了这棵树,可是该怎么让这个节点的信息显示呢?求助。。。。



------解决方案--------------------
<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("");
};
------解决方案--------------------
JScript code

<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> 
  相关解决方案