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;}