日期:2014-05-16  浏览次数:20325 次

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 = attrib