`
xingyx
  • 浏览: 60956 次
  • 性别: Icon_minigender_2
社区版块
存档分类
最新评论
  • 52p9_xu: 感谢分享,本人最近闲来无事也想搭建一个 全注解的SSH框架。不 ...
    SSH注解框架

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真正被引用的代码文件.......

分享到:
评论

相关推荐

    ExtJs树例子

    1. **TreePanel**:TreePanel是ExtJS中用于展示树形结构的组件,它可以显示可折叠/展开的节点,每个节点可以有子节点。配置TreePanel时,我们需要指定数据源、节点模型、以及各种UI样式和行为设置。 2. **数据源**...

    父节点选中自动选中其相应的子节点(转别人的)

    child.ui.toggleCheck(checked); child.attributes.checked = checked; child.fireEvent('checkchange', child, checked); }); } } }); ``` ### 知识点四:`node.attributes is undefined`问题分析 遇到`...

    ExtJS_Tree利用_JSON_在Struts_2实现Ajax动态加载树结点

    在本文中,我们将深入探讨如何使用ExtJS框架的Tree组件,结合JSON数据格式以及Struts 2框架,来实现Ajax动态加载树形结构的节点。这是一项常见的需求,特别是在构建可扩展、用户友好的Web应用时,动态加载的树结构...

    extjs tree

    ExtJS Tree 是一个基于JavaScript的UI组件库ExtJS中的一个重要组成部分,用于构建可交互的树形数据结构。在Web应用程序中,它常被用来展示层级关系的数据,如目录结构、组织架构或者数据库的表关系。ExtJS Tree的...

    admin.zealot09:表达 extjs 节点

    标题中的“admin.zealot09:表达 extjs 节点”表明这是一个关于使用ExtJS构建的管理员系统的项目,其中可能涉及到ExtJS的树形节点操作。ExtJS是一款强大的JavaScript前端框架,用于构建富客户端应用,尤其擅长数据...

    eXtree js树

    在实际开发中,eXtree通常与其他JavaScript框架如ExtJS、Sencha Touch一起使用,它们提供了丰富的组件库和强大的布局管理,使得构建复杂的Web应用变得更加容易。eXtree js树是这些框架中的一个关键组件,用于展现...

    ExtAspNet_v2.3.2_dll

    +TreeNode的属性NodeId被重命名为NodeID,这是ExtAspNet中的一个命名约定。 -同时更名的还有GridColumn的ColumnId->ColumnID,GetColumnId->GetColumnID。 -Grid1.Columns.FindColumnById函数被Grid1.Find...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    +TreeNode的属性NodeId被重命名为NodeID,这是ExtAspNet中的一个命名约定。 -同时更名的还有GridColumn的ColumnId->ColumnID,GetColumnId->GetColumnID。 -Grid1.Columns.FindColumnById函数被Grid1.Find...

    在VS下利用Ext4.2的TreePanel的简单demo

    这对于初学者来说是一个很好的起点,能够帮助理解如何将前端UI与后端数据服务相结合。 首先,让我们了解什么是TreePanel。TreePanel是ExtJS库中的一个组件,它用于展示层次结构的数据,通常以树状的形式呈现。在Ext...

    Ext动态树的生成,后台是JSP

    ExtJS 是一个强大的JavaScript库,用于构建富客户端的Web应用程序,而JSP(JavaServer Pages)是Java平台上的服务器端脚本技术,用于生成动态网页。在本场景中,我们将探讨如何结合两者来生成动态的树形结构,即Ext...

Global site tag (gtag.js) - Google Analytics