`

ext2的tree id不唯一的解决办法

阅读更多
现状:一个tree,两组,由于tree的节点从数据的两个表取出,id有可能会重复,但ext的tree同样是通过ID区分,导至焦点不能正确定位。

解决办法 :
第一步:重写treeloader类的createNode方法
createNode : function(attr){
        if(this.baseAttrs){
            Ext.applyIf(attr, this.baseAttrs);
        }
        if(this.applyLoader !== false){
            attr.loader = this;
        }
		attr.text = attr.dirname;
		attr.id = attr.dirid;
		attr.treeid = attr.type+attr.dirid;//主要是这句
        if(typeof attr.uiProvider == 'string'){
           attr.uiProvider = this.uiProviders[attr.uiProvider] || eval(attr.uiProvider);
        }
        return(attr.leaf ?
            new Ext.tree.TreeNode(attr) :
            new Ext.tree.AsyncTreeNode(attr));
    }


第二步:重写Ext.tree.TreePanel类的registerNode方法,记tree注册treeid为真实ID
Ext.override(Ext.tree.TreePanel,{
	getNodeByTreeId : function(treeid){
        return this.nodeHash[treeid];
    },
	registerNode : function(node){
        this.nodeHash[node.attributes.treeid] = node;
    },
	unregisterNode : function(node){
        delete this.nodeHash[node.attributes.treeid];
    }

})


第三步:重写Ext.tree.TreeNode类的ensureVisible 方法,使其调用的getNodeByTreeId为treeid
Ext.override(Ext.tree.TreeNode,{
	ensureVisible : function(callback){
        var tree = this.getOwnerTree();
        tree.expandPath(this.parentNode.getPath(), false, function(){
            var node = tree.getNodeByTreeId(this.attributes.treeid);  // Somehow if we don't do this, we lose changes that happened to node in the meantime
            tree.getTreeEl().scrollChildIntoView(node.ui.anchor);
            Ext.callback(callback);
        }.createDelegate(this));
    }
})


第四步:重写Ext.tree.TreeEventModel类getNode方法,使其调getNodeByTreeId方法
Ext.override(Ext.tree.TreeEventModel,{
	getNode : function(e){
        var t;
        if(t = e.getTarget('.x-tree-node-el', 10)){
            var id = Ext.fly(t, '_treeEvents').getAttributeNS('ext', 'tree-node-id');
            if(id){
                return this.tree.getNodeByTreeId(id);
            }
        }
        return null;
    }
})



第五步:重写Ext.tree.TreeNodeUI类,我这里采用的是继承,覆盖renderElements方法,主要是这句:
<div ext:tree-node-id="',n.attributes.treeid,'"

第六步:如果此tree支持拖拽,需要重写Ext.tree.TreeDropZone的onNodeOver
加上(加这句的原因不太清楚,只是加上就好使了)
onNodeOver : function(n, dd, e, data){
		if(n.node == undefined){
			return;
		}

*****
}


第七步:新建节点时,加上下面(treeid)
var attr = {
					text: '新建分类',
					type: node.attributes.type,
					treeid: Ext.id(null, node.attributes.type),
					uiProvider: BufTreeSpecUI
				}
var n = new Ext.tree.TreeNode(attr);



此时,业务中引用的依然是node.id属性
2
0
分享到:
评论

相关推荐

    Ext.tree.TreeLoader附带封装的json类

    在本文中,我们将深入探讨`Ext.tree.TreeLoader`与JSON数据在Ext JS框架中的应用。`Ext.tree.TreeLoader`是Ext JS库中的一个组件,它负责加载和解析树形结构的数据,而JSON(JavaScript Object Notation)则是一种轻...

    EXT tree 使用 实例 最新

    2. **数据源**:EXT Tree的数据可以来源于服务器端,也可以预定义在本地。使用`store`配置来指定数据源,可以是JSON数组或者远程URL。数据格式通常是JSON,每个对象代表一个节点,包含`text`(节点文本)、`id`...

    Ext_Tree属性方法

    ### Ext_Tree属性方法详解 #### 一、Ext.tree.TreePanel `Ext.tree.TreePanel`是Ext框架中的一个组件,用于创建树形结构的数据展示。它提供了丰富的配置选项和方法来控制树形结构的行为和外观。 - **root**:定义...

    ext两张表组成的tree结构防止id重复的方法(一)

    通过合理地使用数据库约束、生成唯一ID的策略以及EXT的组件和API,我们可以有效地处理由两张表组成的树结构,确保数据的完整性和一致性。在实际应用中,还需要根据业务需求和性能要求,选择最适合的解决方案。

    Extjs Tree + JSON + Struts2 例子

    通过这种方式,我们解决了 Struts2 JSON 插件返回数据格式与 ExtJS Tree 期待格式不匹配的问题。现在,树形菜单应该能够正确地动态加载并显示从服务器获取的数据。这个例子展示了如何在实际开发中灵活应对数据格式...

    符合Ext tree的全国城市列表json格式

    在这个案例中,每个城市作为一个对象,可能包含属性如“name”(城市名称)、“id”(唯一标识)、“children”(子节点列表)等。 综合这些信息,我们可以了解到这是一个关于使用Ext JS和JSON数据构建全国城市树形...

    获取Extjs中的TreePanel中所有的被checked的叶子节点的id

    var tree = Ext.getCmp('treeId'); // 监听checkchange事件 tree.on('checkchange', function(node) { // 在这里处理被选中的节点 }); ``` #### 2. 使用cascade方法遍历所有节点 `cascade`方法可以遍历TreePanel...

    ExtJs3.* 分页树 Ext.ux.tree.PagingTreeLoader

    ExtJs 3.x 分页树(Ext.ux.tree.PagingTreeLoader)是一个强大的扩展,它在处理大量数据时尤其有用,因为树形结构通常需要显示大量的层级和节点。这个组件引入了分页功能,允许用户逐步加载树节点,而不是一次性加载...

    EXT 控件拖动例子

    这个设计器可能使用了`Ext.grid.Panel`或`Ext.tree.Panel`来展示可用的控件库,而工作区则使用了某种布局管理器来处理控件的放置。 为了实现控件的拖放,开发者通常还需要处理一些细节,例如: 1. **阻止默认...

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

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

    extjs tree

    - **参数**: `id` - 要查找的节点的唯一标识符。 - **用途**: 返回具有给定ID的节点。 **4. TreeEditor (TreePanel tree, Object config)** - 用于编辑树中的节点。 - **参数**: `tree` - 要编辑的`TreePanel`...

    Extjs复习笔记(十九)-- XML作为tree的数据源

    &lt;node id="2" text="Node 2"/&gt; &lt;/tree&gt; ``` Store的配置可能如下: ```javascript var store = Ext.create('Ext.data.TreeStore', { model: 'TreeNode', proxy: { type: 'ajax', url: 'path_to_your_xml_...

    Extjs树菜单的构成

    例如,`text`属性定义节点的显示文本,`leaf`属性表示该节点是否为叶子节点,`id`是节点的唯一标识,`href`和`hrefTarget`分别用于设置链接地址和打开方式,`draggable`决定节点是否可拖动,`checked`控制是否显示复...

    用ExtJS实现动态载入树

    var Tree = Ext.tree; var tree = new Tree.TreePanel({ el: 'tree-div', // 目标div容器 autoScroll: true, animate: true, enableDD: true, containerScroll: true, loader: new Tree.TreeLoader({ ...

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

    -Grid中TemplateField生成到页面中控件具有唯一ID,例如Grid1_ct5_Label2,Grid1_ct6_Label2(feedback:geruger)。 +2009-09-27 v2.1.2 -为Tree控件增加GetExpandAllNodesReference和...

    学习YUI.Ext 第六天--关于树TreePanel(Part 1)

    JSON中的节点属性如`text`(节点文本)、`id`(唯一标识符)、`leaf`(是否为叶子节点)和`cls`(附加CSS类名)定义了树节点的外观和行为。 9. **扩展功能**: TreePanel支持拖放(Drag and Drop, DnD)功能,...

    学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)

    ### 学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点) #### 引言 在本篇文章中,我们将深入探讨如何使用YUI.Ext库中的TreePanel组件来实现异步获取树节点的功能。不同于同步加载方式,异步加载能够显著...

    extjs 总结

    2. **主要方法** - `collapseAll()`: 收缩树中所有的节点。 - `expandAll()`: 展开所有的节点。 - `getRootNode()`: 获取树的根节点。 - `getNodeById(id)`: 通过节点ID查找并返回相应的节点对象。 - `expand(...

    extjs4 MVC2 TreePanel动态JSON实现

    通过`Ext.create`方法创建了一个名为`TreeStore`的实例,并设置了其代理(`proxy`)属性为Ajax类型,以便能够从服务器端动态加载JSON格式的数据。 ```javascript var TreeStore = Ext.create('Ext.data.TreeStore',...

    EXTJS___API详解

    1. **Ext 类**:这是EXTJS的基础类,提供了许多实用的静态方法,如Ext.apply()用于对象属性的合并,Ext.id()用于生成唯一的ID。 2. **Array 类**:EXTJS扩展了JavaScript的数组对象,添加了一些实用的方法,如Ext....

Global site tag (gtag.js) - Google Analytics