此样例依赖EXT3.0
将以下三个文件放在ext3/examples/tree目录下即可
需要部署在WEB服务器上才能正常运行
主要是对原来的样例进行了修改，提供全选功能。
check-tree.js
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* http://www.extjs.com/license
*/
Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
renderTo:'tree-div',
title: 'My Task List',
height: 300,
width: 400,
useArrows:true,
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
rootVisible: false,
frame: true,
root: {
nodeType: 'async'
},
// auto create TreeLoader
dataUrl: 'check-nodes.json',
listeners: {
'checkchange': function(node, checked){
console.log('------------checkchange----------checked['+checked+']---');
console.log(node);
//父节点
if(false)
{
for(var i=0;i<node.childNodes.length;i++)
{
node.childNodes[i].attributes.checked = checked;
node.childNodes[i].checked=checked;
node.childNodes[i].getUI().checkbox.checked = checked;
}
}
//叶子节点
else if(true){
for(var i=0;i<node.childNodes.length;i++)
{
node.childNodes[i].attributes.checked = checked;
node.childNodes[i].checked=checked;
node.childNodes[i].getUI().checkbox.checked = checked;
if(node.childNodes[i].childNodes!=undefined)
{
var childNode=node.childNodes[i];
for(var j=0;j<childNode.childNodes.length;j++)
{
childNode.childNodes[j].attributes.checked = checked;
childNode.childNodes[j].checked=checked;
childNode.childNodes[j].getUI().checkbox.checked = checked;
}
}
}
//取消选中
if(!checked)
{
if(node.parentNode.leaf!=undefined)
{
node.parentNode.attributes.checked=false;
node.parentNode.getUI().checkbox.checked=false;
if(node.parentNode.parentNode.leaf!=undefined)
{
node.parentNode.parentNode.attributes.checked=false;
node.parentNode.parentNode.getUI().checkbox.checked=false;
}
}
}else
{
var childNodes=node.parentNode.childNodes;
var isAllSelect=true;
for(var i=0;i<childNodes.length;i++)
{
//未选中
if(!childNodes[i].attributes.checked)
{
isAllSelect=false;
break;
}
}
//如果是全选 ，则将你节点设置为选中
if(isAllSelect)
{
node.parentNode.attributes.checked=true;
node.parentNode.getUI().checkbox.checked=true;
}
}
}
}
},
buttons: [{
text: 'Get Completed Tasks',
handler: function(){
var msg = '', selNodes = tree.getChecked();
Ext.each(selNodes, function(node){
if(msg.length > 0){
msg += ', ';
}
msg += node.text;
});
Ext.Msg.show({
title: 'Completed Tasks',
msg: msg.length > 0 ? msg : 'None',
icon: Ext.Msg.INFO,
minWidth: 200,
buttons: Ext.Msg.OK
});
}
}]
});
tree.getRootNode().expand(true);
});
check-tree.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Checkbox TreePanel</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="check-tree.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<style type="text/css">
.complete .x-tree-node-anchor span {
text-decoration: line-through;
color: #777;
}
</style>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
<h1>Checkbox Selection in a TreePanel</h1>
<p>This example shows simple checkbox selection in a tree. It is enabled on leaf nodes by simply
setting <tt>checked:true/false</tt> at the node level.</p>
<p>This example also shows loading an entire tree structure statically in one load call, rather than
loading each node asynchronously.</p>
<p>The js is not minified so it is readable. See <a href="check-tree.js">check-tree.js</a>.</p>
<div id="tree-div"></div>
</body>
</html>
check-nodes.json
[{
text: 'To Do',
cls: 'folder',
leaf: false,
checked: false,
children: [{
text: 'Go jogging',
leaf: true,
checked: false
},{
text: 'Take a nap',
leaf: true,
checked: false
},{
text: 'Climb Everest',
leaf: true,
checked: false
}]
},{
text: 'Grocery List',
cls: 'folder',
leaf: false,
checked: false,
children: [{
text: 'Bananas',
leaf: true,
checked: false
},{
text: 'Milk',
leaf: true,
checked: false
},{
text: 'Cereal',
leaf: true,
checked: false
},{
text: 'Energy foods',
cls: 'folder',
leaf: false,
checked: false,
children: [{
text: 'Coffee',
leaf: true,
checked: false
},{
text: 'Red Bull',
leaf: true,
checked: false
}]
}]
},{
text: 'Remodel Project',
cls: 'folder',
leaf: false,
checked: false,
children: [{
text: 'Finish the budget',
leaf: true,
checked: false
},{
text: 'Call contractors',
leaf: true,
checked: false
},{
text: 'Choose design',
leaf: true,
checked: false
}]
}]