ExtJS学习笔记(十一) Tree的父子级联动选定，和自定义半选状态

在上一章的基础上添加，上节末尾有源代码地址

Ext.define("Demo.controller.tree.Tree", {
extend: "Ext.app.ViewController",
alias: "controller.demo_controller_tree",
init: function () {
this.control({
"demo_view_tree": {
checkchange: this.onCheckChange
}
});
},
onCheckChange: function (node, ischecked) {
// 不为空，表示为半选状态，半选之后的状态为选定
if (node.get("cls") != "") {
ischecked = true;
}
var me = this;
me.checkedChildNode(node, ischecked, me);
me.checkedParentNode(node, ischecked, me);
},
// 选中所有的子节点
checkedChildNode: function (node, ischecked, me) {
node.set("checked", ischecked);
node.set("cls", "");
if (node.hasChildNodes()) {     // 是否包含子节点
node.eachChild(function (nodeChild) {
me.checkedChildNode(nodeChild, ischecked, me)
});
}
},
// 选中所有的父节点，半选或者选中
// 在Ext4.0之后，树的选定状态就只有选定和不选定，取消了半选定状态。
// 因此在设计树的时候应该只给叶子节点(leaf)设置checked属性
// 如果一定要使用半选定状态可以参考下述的代码
checkedParentNode: function (node, ischecked, me) {
var parent = node.parentNode;
var partial = true;
if (parent != null) {
parent.eachChild(function (parentChild) {
// 确定半选状态
// 情况一：子节点的checked与ischecked不一致
// 情况二：子节点为半选状态 parentChild.get("cls") != ""
if (parentChild.get("checked") != ischecked || parentChild.get("cls") != "") {
// 半选定状态为 : 选定 + 透明度50%
parent.set("cls", "partial_select");
parent.set("checked", true);
partial = false;
return false;
}
});
if (partial) {
parent.set("checked", ischecked);
parent.set("cls", "");
}
me.checkedParentNode(parent, ischecked, me);
}
}

});

/* 半选状态的css */
.partial_select
{
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}