【无事水一发】ExtJS4 Ext.tree.Panel (无限层级)带复选框树勾选(父级子级)联动代码

Ext.onReady(function() {
var store = Ext.create('Ext.data.TreeStore', {//测试数据
root:{
text:'Root',
expanded: true,
checked: false,
children:[{
"text": "2013年",
"expanded": true,
"checked": false,
"children": [{
"text": "一月",
"leaf": false,
"checked": false,
"children":[{
"text": "1日",
"leaf": false,
"checked": false,
"children":[{
"text": "1时",
"leaf": true,
"checked": false
},{
"text": "2时",
"leaf": true,
"checked": false
},{
"text": "3时",
"leaf": true,
"checked": false
},{
"text": "4时",
"leaf": true,
"checked": false
}]
},{
"text": "2日",
"leaf": true,
"checked": false
},{
"text": "3日",
"leaf": true,
"checked": false
},{
"text": "4日",
"leaf": true,
"checked": false
},{
"text": "5日",
"leaf": true,
"checked": false
},{
"text": "6日",
"leaf": true,
"checked": false
}]
},{
"text": "二月",
"leaf": true,
"checked": false
},{
"text": "三月",
"leaf": true,
"checked": false
},{
"text": "四月",
"leaf": true,
"checked": false
},{
"text": "五月",
"leaf": true,
"checked": false
},{
"text": "六月",
"leaf": true,
"checked": false
},{
"text": "七月",
"leaf": true,
"checked": false
},{
"text": "八月",
"leaf": true,
"checked": false
},{
"text": "九月",
"leaf": true,
"checked": false
},{
"text": "十月",
"leaf": true,
"checked": false
},{
"text": "十一月",
"leaf": true,
"checked": false
},{
"text": "十二月",
"leaf": true,
"checked": false
}]
},{
"text": "2014年",
"expanded": false,
"checked": false,
"children": [{
"text": "一月",
"leaf": true,
"checked": false
},{
"text": "二月",
"leaf": true,
"checked": false
},{
"text": "三月",
"leaf": true,
"checked": false
},{
"text": "四月",
"leaf": true,
"checked": false
},{
"text": "五月",
"leaf": true,
"checked": false
},{
"text": "六月",
"leaf": true,
"checked": false
},{
"text": "七月",
"leaf": true,
"checked": false
},{
"text": "八月",
"leaf": true,
"checked": false
},{
"text": "九月",
"leaf": true,
"checked": false
},{
"text": "十月",
"leaf": true,
"checked": false
},{
"text": "十一月",
"leaf": true,
"checked": false
},{
"text": "十二月",
"leaf": true,
"checked": false
}]
}]
}
});

var tree = Ext.create('Ext.tree.Panel', {
store: store,
rootVisible: true,
useArrows: true,
frame: true,
title: 'Check Tree',
renderTo: '_main',
width: 200,
height: 450,
listeners:{
'checkchange':function(node, checked, eOpts) {//这里是关键
function ck(node) {
Ext.Array.each(node.childNodes, function(item, index, allItems){
item.set('checked', checked);
if(!item.isLeaf() && node.hasChildNodes())) ck(item);
});
}
function rck(node) {
var cnt = 0;
Ext.Array.each(node.parentNode.childNodes, function(item, index, allItems){
if(item.get('checked')) {
cnt += 1;
}
});
node.parentNode.set('checked', (cnt == node.parentNode.childNodes.length));
if(!node.parentNode.isRoot()) rck(node.parentNode);
}
if(!node.isLeaf() && node.hasChildNodes()) {
ck(node);
}
rck(node);
}
}
});
});