EXT tree怎么在文本框中显示选中的节点的信息
日期：2014-05-16 浏览次数：20368 次
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("");
};
------解决方案--------------------
需要实现 在一个<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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
