Ext的treenode

ext的tree节点设置了attributes.checked=true 界面上面为啥不显示啊？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

你会jsp么？
我有例子,需要注意的是我用了一个ext组件TreeCheckNodeUI.js, 你搜一下就有了。
tree.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />

<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all.js"></script>
    <script type="text/javascript" src="ext/source/locale/ext-lang-zh_CN.js"></script>
    <script type="text/javascript" src="js/TreeCheckNodeUI.js"></script>
    <script type="text/javascript" src="js/tree.js"></script>

    <script type="text/javascript">

    </script>

    <style type="text/css">

    </style>
  </head>

  <body>
<DIV id="tree-ct" style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; OVERFLOW: auto; HEIGHT: 400px; BORDER-RIGHT-WIDTH: 0px"></DIV>
<div style="border: solid red 1px;" id="selectedItems"></div>
</body>
</html>tree.js:var root = null;;
Ext.onReady(function() {
root = new Ext.tree.TreeNode({
id : '0',
text : 'Root',
leaf : false,
checked: true
});
var level1 = new Ext.tree.TreeNode({
id : '01',
leaf : false,
text : 'Level 1 -1',
checked: true
});
level1.appendChild(new Ext.tree.TreeNode({
id : '011',
leaf : false,
text : 'Level 2 -1',
checked: true
}));
level1.appendChild(new Ext.tree.TreeNode({
id : '012',
leaf : false,
text : 'Level 2 -2',
checked: true
}));
level1.appendChild(new Ext.tree.TreeNode({
id : '013',
leaf : false,
text : 'Level 2 -3',
checked: false
}));
root.appendChild(level1);
root.appendChild(new Ext.tree.TreeNode({
id : '02',
leaf : true,
text : 'Level 1 -2',
checked: true
})); var tree = new Ext.tree.TreePanel({
applyTo : 'tree-ct',
width : 568,
height : 300,
checkModel : 'cascade',
onlyLeafCheckable : true,
animate : false,
rootVisible : true,
autoScroll : true,
root : root
}); tree.getRootNode().expand();
//获取被选中的items并放到一个div里面
getSelectedItems("Root",root); });//获取被选中的items
//从根节点遍历整个tree，把叶子列出来放在一个div里面，
function getSelectedItems(parentPath, _root){
if(_root){
//alert(_root.attributes['checked']);
var nodes = _root.childNodes;
if(nodes.length==0){
return;
}
for(var i=0; i<nodes.length; i++){
if(nodes[i].attributes['checked']){
var div = document.createElement("div");
div.appendChild(document.createTextNode(parentPath + "\\" + nodes[i].text));
document.getElementById("selectedItems").appendChild(div);
}
if(!nodes[i].leaf){
//递归调用自己，以实现遍历
getSelectedItems(parentPath+ "\\" + nodes[i].text,  nodes[i]);
}
}
}
}
对了，我上面的例子和jsp没有多大关系，你把tree.jsp中jsp相关的东西去掉把后缀改为html一样可以运行
tree.html:<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />

     <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all.js"></script>
    <script type="text/javascript" src="ext/source/locale/ext-lang-zh_CN.js"></script>
    <script type="text/javascript" src="js/TreeCheckNodeUI.js"></script>
    <script type="text/javascript" src="js/tree.js"></script>

    <script type="text/javascript">

    </script>

    <style type="text/css">

    </style>
  </head>

  <body>
<DIV id="tree-ct" style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; OVERFLOW: auto; HEIGHT: 400px; BORDER-RIGHT-WIDTH: 0px"></DIV>
<div style="border: solid red 1px;" id="selectedItems"></div>
</body>
</html>