ExtJs 3.31 三態樹

主要實現原理就是替換TreeNodeUI這個類的renderElements方法，將以前的<input type='checkbox'>替換成圖片形式的checkbox。當然需要修改相應的方法，如isChecked() 等方法。

注意：1、現在三態的表示方式均爲字符串 "True","False","Not"，分別代表 選中、空、反選。

2、在TreeNode中增加isThr屬性，表示是否爲三太顯示，false和置默認爲兩態，true爲三太。

 

廢話不說了直接上代碼。

 

1、JS代碼：

Ext.override(Ext.tree.TreeNodeUI, {
    grayedValue: null,
    isThr: false,
    onDisableChange: function (node, state) {
        this.disabled = state;
        this[state ? 'addClass' : 'removeClass']("x-tree-node-disabled");
    },
    initEvents: function () {
        this.node.on("move", this.onMove, this);
        if (this.node.disabled) {
            this.disabled = true;
            this.addClass("x-tree-node-disabled");
        }
        if (this.node.hidden) {
            this.hide();
        }
        var ot = this.node.getOwnerTree();
        var dd = ot.enableDD || ot.enableDrag || ot.enableDrop;
        if (dd && (!this.node.isRoot || ot.rootVisible)) {
            Ext.dd.Registry.register(this.elNode, {
                node: this.node,
                handles: this.getDDHandles(),
                isHandle: false
            });
        }
    },
    onDblClick: function (e) {
        e.preventDefault();
        if (this.disabled) {
            return;
        }
        if (!this.animating && this.node.isExpandable() && !e.getTarget('.x-tree-checkbox', 1)) {
            this.node.toggle();
        }
        this.fireEvent("dblclick", this.node, e);
    },
    onCheckChange: function () {
        var checked = this.isChecked();
        if (checked !== this.node.attributes.checked) {
            this.node.attributes.checked = checked;
            this.fireEvent('checkchange', this.node, checked);
        }
    },
    toggleCheck: function (checked) {
        var cb = this.checkbox;
        if (!cb) {
            return 'false';
        }
        if (checked === undefined) {
            checked = this.isChecked();
        }
        else {
            if (this.isThr == true) {
                checked = checked == 'true' ? 'false' : (checked == 'false' ? 'not' : 'true');
            }
            else {
                checked = checked == 'true' ? 'false' : 'true';
            }
        }
        if (this.isThr == true) {
            if (checked == 'true') {
                Ext.fly(cb).replaceClass('x-tree-node-checked', 'x-tree-node-grayed');
            } else if (checked == 'false') {
                Ext.fly(cb).replaceClass('x-tree-node-unchecked', 'x-tree-node-checked');
            } else if (checked == 'not') {
                Ext.fly(cb).replaceClass('x-tree-node-grayed', 'x-tree-node-unchecked');
            }
            else {
                Ext.fly(cb).removeClass(['x-tree-node-checked', 'x-tree-node-grayed', 'x-tree-node-unchecked']);
            }
        }
        else {
            if (checked == 'true') {
                Ext.fly(cb).replaceClass('x-tree-node-checked', 'x-tree-node-unchecked');
            } else if (checked == 'false') {
                Ext.fly(cb).replaceClass('x-tree-node-unchecked', 'x-tree-node-checked');
            } else {
                Ext.fly(cb).removeClass(['x-tree-node-checked', 'x-tree-node-unchecked']);
            }
        }
        this.onCheckChange();
        return checked;
    },
    onCheckboxClick: function () {
        if (!this.disabled) {
            this.toggleCheck();
        }
    },
    onCheckboxOver: function () {
        this.addClass('x-tree-checkbox-over');
    },
    onCheckboxOut: function () {
        this.removeClass('x-tree-checkbox-over');
    },
    onCheckboxDown: function () {
        this.addClass('x-tree-checkbox-down');
    },
    onCheckboxUp: function () {
        this.removeClass('x-tree-checkbox-down');
    },
    renderElements: function (n, a, targetNode, bulkRender) {
        this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
        var cb = a.checked !== undefined;
        this.isThr = a.isThr !== undefined;
        var href = a.href ? a.href : Ext.isGecko ? "" : "#";
        var buf = ['<li class="x-tree-node"><div ext:tree-node-id="', n.id, '" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls, '" unselectable="on">',
            '<span class="x-tree-node-indent">', this.indentMarkup, "</span>",
            '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',
            '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon', (a.icon ? " x-tree-node-inline-icon" : ""), (a.iconCls ? " " + a.iconCls : ""), '" unselectable="on" />',
            cb ? ('<img src="' + this.emptyIcon + '" class="x-tree-checkbox' + (a.checked === true ? ' x-tree-node-checked' : (a.checked === false ? ' x-tree-node-unchecked' : ' x-tree-node-grayed')) + '" />') : '',
            '<a hidefocus="on" class="x-tree-node-anchor" href="', href, '" tabIndex="1" ',
            a.hrefTarget ? ' target="' + a.hrefTarget + '"' : "", '><span unselectable="on">', n.text, "</span></a></div>",
            '<ul class="x-tree-node-ct" style="display:none;"></ul>',
            "</li>"].join('');
        var nel;
        if (bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())) {
            this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
        } else {
            this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
        }
        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];
        var index = 3;
        if (cb) {
            this.checkbox = cs[3];
            index++;
        }
        this.anchor = cs[index];
        this.textNode = cs[index].firstChild;
    },
    isChecked: function () {
        if (this.isThr == true) {
            return this.checkbox
            ? (Ext.fly(this.checkbox).hasClass('x-tree-node-checked')
                ? 'true'
                : Ext.fly(this.checkbox).hasClass('x-tree-node-grayed')
                    ? 'not'
                    : Ext.fly(this.checkbox).hasClass('x-tree-node-unchecked')
                        ? 'false'
                        : 'false'
                    )
            : false;
        }
        else {
            return this.checkbox
            ? (Ext.fly(this.checkbox).hasClass('x-tree-node-checked')
                ? 'true'
                : Ext.fly(this.checkbox).hasClass('x-tree-node-unchecked')
                    ? 'false'
                    : 'false')
            : 'false';
        }
    },
    getChecked: function () {
        return this.node.attributes.checked;
    }
});
Ext.override(Ext.tree.TreeEventModel, {
    initEvents :function(){
        var el = this.tree.getTreeEl();
        el.on('click', this.delegateClick, this);
        if(this.tree.trackMouseOver !== false){
            el.on('mouseover', this.delegateOver, this);
            el.on('mouseout', this.delegateOut, this);
        }
        el.on('mousedown', this.delegateDown, this);
        el.on('mouseup', this.delegateUp, this);
        el.on('dblclick', this.delegateDblClick, this);
        el.on('contextmenu', this.delegateContextMenu, this);
    },
    delegateOver :function(e, t){
        if(!this.beforeEvent(e)){
            return;
        }
        if(this.lastEcOver){
            this.onIconOut(e, this.lastEcOver);
            delete this.lastEcOver;
        }
        if(this.lastCbOver){
            this.onCheckboxOut(e, this.lastCbOver);
            delete this.lastCbOver;
        }
        if(e.getTarget('.x-tree-ec-icon', 1)){
            this.lastEcOver = this.getNode(e);
            this.onIconOver(e, this.lastEcOver);
        }
        else if(e.getTarget('.x-tree-checkbox', 1)){
            this.lastCbOver = this.getNode(e);
            this.onCheckboxOver(e, this.lastCbOver);
        }
        if(this.getNodeTarget(e)){
            this.onNodeOver(e, this.getNode(e));
        }
    },
    delegateOut :function(e, t){
        if(!this.beforeEvent(e)){
            return;
        }
        var n;
        if(e.getTarget('.x-tree-ec-icon', 1)){
            n = this.getNode(e);
            this.onIconOut(e, n);
            if(n == this.lastEcOver){
                delete this.lastEcOver;
            }
        }
        else if(e.getTarget('.x-tree-checkbox', 1)){
            n = this.getNode(e);
            this.onCheckboxOut(e, n);
            if(n == this.lastCbOver){
                delete this.lastCbOver;
            }
        }
        t = this.getNodeTarget(e);
        if(t && !e.within(t, true)){
            this.onNodeOut(e, this.getNode(e));
        }
    },
    delegateDown :function(e, t){
        if(!this.beforeEvent(e)){
            return;
        }
        if(e.getTarget('.x-tree-checkbox', 1)){
            this.onCheckboxDown(e, this.getNode(e));
        }
    },
    delegateUp :function(e, t){
        if(!this.beforeEvent(e)){
            return;
        }
        if(e.getTarget('.x-tree-checkbox', 1)){
            this.onCheckboxUp(e, this.getNode(e));
        }
    },
    delegateClick :function(e, t){
        if(!this.beforeEvent(e)){
            return;
        }
        if(e.getTarget('.x-tree-checkbox', 1)){
            this.onCheckboxClick(e, this.getNode(e));
        }
        else if(e.getTarget('.x-tree-ec-icon', 1)){
            this.onIconClick(e, this.getNode(e));
        }
        else if(this.getNodeTarget(e)){
            this.onNodeClick(e, this.getNode(e));
        }
    },
    onCheckboxClick :function(e, node){
        node.ui.onCheckboxClick();
    },
    onCheckboxOver :function(e, node){
        node.ui.onCheckboxOver();
    },
    onCheckboxOut :function(e, node){
        node.ui.onCheckboxOut();
    },
    onCheckboxDown :function(e, node){
        node.ui.onCheckboxDown();
    },
    onCheckboxUp :function(e, node){
        node.ui.onCheckboxUp();
    }
});
Ext.override(Ext.tree.TreePanel, {
    getChecked : function(a, startNode){
        startNode = startNode || this.root;
        var r = [];
        var f = function(){
            if(this.ui.getChecked()){
                r.push(!a ? this : (a == 'id' ? this.id : this.attributes[a]));
            }
        };
        startNode.cascade(f);
        return r;
    }
});

 

2、CSS文件：

 

.x-tree-checkbox {
    background:url('../../resources/images/default/form/checkbox.gif') no-repeat 0 0;
    height:13px;
    width:13px;
    vertical-align:middle;
}
.x-tree-checkbox-over .x-tree-checkbox {
    background-position:-13px 0;
}
.x-tree-checkbox-down .x-tree-checkbox {
    background-position:-26px 0;
}
.x-tree-node-disabled .x-tree-checkbox {
    background-position:-39px 0;
}
.x-tree-node-checked {
    background-position:0 -13px;
}
.x-tree-checkbox-over .x-tree-node-checked {
    background-position:-13px -13px;
}
.x-tree-checkbox-down .x-tree-node-checked {
    background-position:-26px -13px;
}
.x-tree-node-disabled .x-tree-node-checked {
    background-position:-39px -13px;
}
.x-tree-node-grayed {
    background-position:0 -26px;
}
.x-tree-checkbox-over .x-tree-node-grayed {
    background-position:-13px -26px;
}
.x-tree-checkbox-down .x-tree-node-grayed {
    background-position:-26px -26px;
}
.x-tree-node-unchecked {
    background-position:0 0;
}
.x-tree-checkbox-over .x-tree-node-unchecked {
    background-position:-13px 0;
}
.x-tree-checkbox-down .x-tree-node-unchecked {
    background-position:-26px 0;
}
.x-tree-node-disabled .x-tree-node-grayed {
    background-position:-39px -26px;
}

 

3、圖片：

將該圖片放到  ext路徑/resources/images/default/form/ 下替換 checkbox.gif文件