ext.lingo.jsoncheckboxtree.js

anewssystem新闻发布系统集成使用了spring hibernate freemarker EXTJS等开源框架 可以作为学习参考

/* Extending/depending on:
~ = modified function (when updating from SVN be sure to check these for changes, especially to Ext.tree.TreeNodeUI.render() )
+ = added function

TreeSelectionModel.js
    Ext.tree.CheckNodeMultiSelectionModel : ~init(), ~onNodeClick(), +extendSelection(), ~onKeyDown()

TreeNodeUI.js
    Ext.tree.CheckboxNodeUI : ~render(), +checked(), +check(), +toggleCheck()

TreePanel.js
    Ext.tree.TreePanel : +getChecked()

TreeLoader.js
    Ext.tree.TreeLoader : ~createNode()

*/

/**
 * 原始功能只能实现选中或不选两种状态
 * 但我们现在需要非叶子节点可以实现三种状态，既：
 *   节点的子节点都被选中时，显示都被选中的图标
 *   节点的子节点都没选中时，显示都没选中的图标
 *   节点的子节点部分选中时，显示部分选中的图标
 *
 *   显示都被选中，和部分选中时，当前节点的状态是被选中
 *   显示都没选中时，当前节点的状态是没选中
 *
 *   显示都被选中时，单击当前节点，触发的事件是，当前节点变成未选中状态，所有子节点变成未选中状态
 *   显示都没选中时，单击当前节点，触发的事件是，当前节点变成都选中状态，所有子节点变成选中状态
 *   显示部分选中时，单击当前节点，触发的事件是，当前节点变成都选中状态，所有子节点变成选中状态
 *
 *   子节点变成未选中状态时，对应父节点判断所有子节点是否未选中，如果都未选中，变成未选中状态，否则变成部分选中状态
 *   子节点变成选中状态时，对应父节点判断所有子节点是否都选中，如果都选中，变成都选中状态，否则变成部分选中状态
 *
 * @return {Array} 选中节点的id数组
 */
Ext.tree.TreePanel.prototype.getChecked = function(node){
    var checked = [], i;
    if( typeof node == 'undefined' ) {
        node = this.rootVisible ? this.getRootNode() : this.getRootNode().firstChild;
    }

    if( node.attributes.checked ) {
        checked.push(node.id);
        if( !node.isLeaf() ) {
            for( i = 0; i < node.childNodes.length; i++ ) {
                checked = checked.concat( this.getChecked(node.childNodes[i]) );
            }
        }
    }
    return checked;
};

/**
 * @class Ext.tree.CustomUITreeLoader
 * @extends Ext.tree.TreeLoader
 * 重写createNode()，强制uiProvider是任意的TreeNodeUI来保存广度
 */
Ext.tree.CustomUITreeLoader = function() {
    Ext.tree.CustomUITreeLoader.superclass.constructor.apply(this, arguments);
};

Ext.extend(Ext.tree.CustomUITreeLoader, Ext.tree.TreeLoader, {
    createNode : function(attr){
        Ext.apply(attr, this.baseAttr || {});

        if(this.applyLoader !== false){
            attr.loader = this;
        }

        // 如果uiProvider是字符串，那么要么从uiProviders数组里取一个对应的，要么解析字符串获得uiProvider
        if(typeof attr.uiProvider == 'string'){
            attr.uiProvider = this.uiProviders[attr.uiProvider] || eval(attr.uiProvider);
        }

        // 返回的时候，如果是叶子，就返回普通TreeNode，如果不是叶子，就返回异步读取树
        return(attr.leaf ? new Ext.tree.TreeNode(attr) : new Ext.tree.AsyncTreeNode(attr));
    }
});


/**
 * @class Ext.tree.CheckboxNodeUI
 * @extends Ext.tree.TreeNodeUI
 * 给所有节点添加checkbox
 */
Ext.tree.CheckboxNodeUI = function() {
    Ext.tree.CheckboxNodeUI.superclass.constructor.apply(this, arguments);
};

Ext.extend(Ext.tree.CheckboxNodeUI, Ext.tree.TreeNodeUI, {
    /**
     * 重写render()
     */
    render : function(bulkRender) {

        var n = this.node;
        /* 在未来的svn里，这个变成了n.ownerTree.innerCt.dom */
        var targetNode = n.parentNode ? n.parentNode.ui.getContainer() : n.ownerTree.container.dom;
        if (!this.rendered) {
            this.rendered = true;
            var a = n.attributes;

            // 为缩进添加缓存，在显示非常大的树的时候有帮助
            this.indentMarkup = "";
            if (n.parentNode) {
                // 根据父节点，计算子节点缩进
                this.indentMarkup = n.parentNode.ui.getChildIndent();
            }

            // modification，添加checkbox
            var buf = ['<li class="x-tree-node"><div class="x-tree-node-el ', n.attributes.cls,'">',
                '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
                '<img src="', this.emptyIcon, '" class="x-tree-ec-icon">',
                '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on">',
/*
                '<input class="l-tcb" type="checkbox" ', (a.checked ? "checked>" : '>'),
*/
                '<img src="',this.emptyIcon,'" class="',this.isAllChildrenChecked(),'">',

                '<a hidefocus="on" href="',a.href ? a.href : "#",'" ',
                 a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',
                 '<span unselectable="on">',n.text,"</span></a></div>",
                '<ul class="x-tree-node-ct" style="display:none;"></ul>',
                "</li>"];

            if (bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()) {
                this.wrap = Ext.DomHelper.insertHtml("beforeBegin", n.nextSibling.ui.getEl(), buf.join(""));
            } else {
                this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
            }
            this.elNode = this.wrap.childNodes[0];
            this.ctNode = this.wrap.childNodes[1];
            var cs = this.elNode.childNodes;
            this.indentNode = cs[0];
            this.ecNode = cs[1];
            this.iconNode = cs[2];
            this.checkbox = cs[3]; // modification，添加checkbox
            this.checkboxImg = cs[3]; // 修改，添加仿造checkbox的图片
            this.anchor = cs[4];
            this.textNode = cs[4].firstChild;
            if (a.qtip) {
                if (this.textNode.setAttributeNS) {
                    this.textNode.setAttributeNS("ext", "qtip", a.qtip);
                    if (a.qtipTitle) {
                        this.textNode.setAttributeNS("ext", "qtitle", a.qtipTitle);
                    }
                } else {
                    this.textNode.setAttribute("ext:qtip", a.qtip);
                    if (a.qtipTitle) {
                        this.textNode.setAttribute("ext:qtitle", a.qtipTitle);
                    }
                }
            } else if(a.qtipCfg) {
                a.qtipCfg.target = Ext.id(this.textNode);
                Ext.QuickTips.register(a.qtipCfg);
            }

            this.initEvents();

            // modification: 添加handlers，避免修改Ext.tree.TreeNodeUI
            Ext.fly(this.checkbox).on('click', this.check.createDelegate(this, [null]));
            n.on('dblclick', function(e) {
                if (this.isLeaf()) {
                    this.getUI().toggleCheck();
                }
            });

            if (!this.node.expanded) {
                this.updateExpandIcon();
            }
        } else {
            if (bulkRender === true) {
                targetNode.appendChild(this.wrap);
            }
        }
    }

    // 这个节点是否被选中了
    , checked : function() {
        // return this.checkbox.checked;
        return this.checkboxImg.className != "x-tree-node-checkbox-none";
    },

    // flag可能是：（NULL）以当前节点状态为准判断，ALL -> NONE -> SOME -> ALL
    // 否则按照设置的flag为准：SOME,ALL,NONE
    check : function(forParent, forChildren) {
        var flag = null;

        if (this.node.isLeaf) {
            flag = (this.checkboxImg.className == "x-tree-node-checkbox-all") ? "x-tree-node-checkbox-none" : "x-tree-node-checkbox-all";
        } else {
            if (this.checkboxImg.className == "x-tree-node-checkbox-all") {
                // 全部反选
                flag = "x-tree-node-checkbox-none";
            } else if (this.checkboxImg.className == "x-tree-node-checkbox-none") {
                // 全部选中
                flag = "x-tree-node-checkbox-some";
            } else {
                // 全部选中
                flag = "x-tree-node-checkbox-all";
            }
        }

        if (typeof forParent == "undefined" || forParent == null) {
            forParent = typeof this.node.parentNode != "undefined" && this.node.parentNode != null;
        }
        if (typeof forChildren == "undefined" || forChildren == null) {
            forChildren = !this.node.ifLeaf;
        }
        console.error(this);
        console.error(flag + "," + forParent + "," + forChildren);

        var n = this.node;
        var tree = n.getOwnerTree();
        var parentNode = n.parentNode;
        // 如果下级节点都尚未渲染过，就展开当前节点，并渲染下面的所有节点
        if (!n.isLeaf && !n.expanded && !n.childrenRendered) {
            n.expand(false, false, this.check.createDelegate(this, [forParent, forChildren]));
            return;
        }

        // 如果包含子节点
        if (forChildren && !n.isLeaf) {
            var cs = n.childNodes;
            for(var i = 0; i < cs.length; i++) {
                cs[i].getUI().checkChild(flag == "x-tree-node-checkbox-all");
            }
        }

        this.checkboxImg.className = "x-tree-node-checkbox-" + this.isAllChildrenChecked();
        if (this.checkboxImg.className == "x-tree-node-checkbox-none") {
            this.node.attributes.checked = false;
        } else {
            this.node.attributes.checked = true;
        }

        if (parentNode.getUI().checkParent) {
            parentNode.getUI().checkParent();