您的位置:首页 > Web前端 > JavaScript

extjs treePanel checkBox级联

2015-05-07 23:23 337 查看
效果图:点击父级,全选/取消全部子级别,点击子级别(递归判断父级是否应该被选中)



{
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
});
}
}
}]
}


转载自:http://blog.sina.com.cn/s/blog_6dc1452201019trh.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: