效果图:点击父级,全选/取消全部子级别,点击子级别(递归判断父级是否应该被选中)
{
title: '菜单测试',
xtype:'treepanel',
id:'treeMenuId',
width: 200,
height:300,
store: leftTreeStore,
hideHeaders: true,
rootVisible: true,
useArrows: true,
listeners:{
checkchange:function(node,checked,obj){
node.cascadeBy(function (n) {//子节点随父节点状态的改变而改变
n.set('checked', checked);
});
checkParent(node);//父节点状态的判断
function checkParent(node){
node = node.parentNode;
if(!node) return;//如果是父节点,则停止递归
var checkP=false;
node.cascadeBy(function (n){
if (n != node) {
if (n.get('checked') == true) {
checkP = true;//如果有一个子节点是选中状态,则父节点也为选中状态
}
}
});
node.set('checked', checkP);
checkParent(node);//递归
}
}
},
dockedItems: [{
xtype: 'toolbar',
items: {
text: '获取选择值',
handler: function(){
var records = Ext.getCmp("treeMenuId").getView().getChecked(),
names = [];
Ext.Array.each(records, function(rec){
//console.log(rec.raw.menuId);
names.push(rec.get('text'));
});
Ext.MessageBox.show({
title: 'Selected Nodes',
msg: names.join(''),
icon: Ext.MessageBox.INFO
});
}
}
}]
}