TreeNode的显示与隐藏(Extjs关于node.ui的问题)

本文转载自 http://blog.csdn.net/angus_17/article/details/6917073 感谢作者的分享；

Ext框架只提供了node.ui.hide()与node.ui.show()两个接口分别用来隐藏和显示一个结点，但没有接口用于判断某一结点的状态是否为隐藏，因为需要自己写代码。在TreeNodeUI类定义的源文件中(/extjspath/source/widgets/tree/TreeNodeUI.js,注，extjs源码位于extjs目录下的source目录中)可以发现
hide()及show()函数代码如下
    hide : function(){
        this.node.hidden = true;
        if(this.wrap){
            this.wrap.style.display = "none";
        }
    },
    show : function(){
        this.node.hidden = false;
        if(this.wrap){
            this.wrap.style.display = "";
        } 
    }
也就是说extjs用node的hidden属性来标识一个node的状态显示或者隐藏,同时若node的ui有wrap元素，其也会被设为display:none,即隐藏.
因而，要判断一个node的显示状态，只需要判断其hidden属性即可(原则上只需要判断hidden,但有时还需要判断一下node.ui.wrap的状态)
虽然node.hidden可以用于判断一个node的显示状态，但并不能通过node.hidden=false来隐藏一下node,官网上也有说明，修改办法如下：
看TreeNodeUI的类文件中
    initEvents : function(){
        this.node.on("move", this.onMove, this);
        if(this.node.disabled){
            this.addClass("x-tree-node-disabled");
            if (this.checkbox) {
                this.checkbox.disabled = true;
            }            
        }
        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
            });
        }
    },
也就是说TreeNodeUI类中有相关代码，即如果node.hidden=true,为隐藏此node,但TreeNode的构造函数中并没有相关的处理代码，需要做如下修改
Ext.tree.TreeNode = function(attributes){
    attributes = attributes || {};
    if(typeof attributes == "string"){
        attributes = {text: attributes};
    }
    this.childrenRendered = false;
    this.rendered = false;
    Ext.tree.TreeNode.superclass.constructor.call(this, attributes);
    this.expanded = attributes.expanded === true;
    this.isTarget = attributes.isTarget !== false;
    this.draggable = attributes.draggable !== false && attributes.allowDrag !== false;
    this.allowChildren = attributes.allowChildren !== false && attributes.allowDrop !== false;
    /**
     * Read-only. The text for this node. To change it use setText().
     * @type String
     */
    this.text = attributes.text;
    /**
     * True if this node is disabled.
     * @type Boolean
     */
    this.disabled = attributes.disabled === true;
    this.hidden = attributes.hidden === true;
注意不是修改source目录中的TreeNode.js,而是extjs真正被引用的代码文件.......