现状:一个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属性
分享到:
相关推荐
在本文中,我们将深入探讨`Ext.tree.TreeLoader`与JSON数据在Ext JS框架中的应用。`Ext.tree.TreeLoader`是Ext JS库中的一个组件,它负责加载和解析树形结构的数据,而JSON(JavaScript Object Notation)则是一种轻...
2. **数据源**:EXT Tree的数据可以来源于服务器端,也可以预定义在本地。使用`store`配置来指定数据源,可以是JSON数组或者远程URL。数据格式通常是JSON,每个对象代表一个节点,包含`text`(节点文本)、`id`...
### Ext_Tree属性方法详解 #### 一、Ext.tree.TreePanel `Ext.tree.TreePanel`是Ext框架中的一个组件,用于创建树形结构的数据展示。它提供了丰富的配置选项和方法来控制树形结构的行为和外观。 - **root**:定义...
通过合理地使用数据库约束、生成唯一ID的策略以及EXT的组件和API,我们可以有效地处理由两张表组成的树结构,确保数据的完整性和一致性。在实际应用中,还需要根据业务需求和性能要求,选择最适合的解决方案。
通过这种方式,我们解决了 Struts2 JSON 插件返回数据格式与 ExtJS Tree 期待格式不匹配的问题。现在,树形菜单应该能够正确地动态加载并显示从服务器获取的数据。这个例子展示了如何在实际开发中灵活应对数据格式...
在这个案例中,每个城市作为一个对象,可能包含属性如“name”(城市名称)、“id”(唯一标识)、“children”(子节点列表)等。 综合这些信息,我们可以了解到这是一个关于使用Ext JS和JSON数据构建全国城市树形...
var tree = Ext.getCmp('treeId'); // 监听checkchange事件 tree.on('checkchange', function(node) { // 在这里处理被选中的节点 }); ``` #### 2. 使用cascade方法遍历所有节点 `cascade`方法可以遍历TreePanel...
ExtJs 3.x 分页树(Ext.ux.tree.PagingTreeLoader)是一个强大的扩展,它在处理大量数据时尤其有用,因为树形结构通常需要显示大量的层级和节点。这个组件引入了分页功能,允许用户逐步加载树节点,而不是一次性加载...
这个设计器可能使用了`Ext.grid.Panel`或`Ext.tree.Panel`来展示可用的控件库,而工作区则使用了某种布局管理器来处理控件的放置。 为了实现控件的拖放,开发者通常还需要处理一些细节,例如: 1. **阻止默认...
在本文中,我们将深入探讨如何使用ExtJS框架的Tree组件,结合JSON数据格式以及Struts 2框架,来实现Ajax动态加载树形结构的节点。这是一项常见的需求,特别是在构建可扩展、用户友好的Web应用时,动态加载的树结构...
- **参数**: `id` - 要查找的节点的唯一标识符。 - **用途**: 返回具有给定ID的节点。 **4. TreeEditor (TreePanel tree, Object config)** - 用于编辑树中的节点。 - **参数**: `tree` - 要编辑的`TreePanel`...
<node id="2" text="Node 2"/> </tree> ``` Store的配置可能如下: ```javascript var store = Ext.create('Ext.data.TreeStore', { model: 'TreeNode', proxy: { type: 'ajax', url: 'path_to_your_xml_...
例如,`text`属性定义节点的显示文本,`leaf`属性表示该节点是否为叶子节点,`id`是节点的唯一标识,`href`和`hrefTarget`分别用于设置链接地址和打开方式,`draggable`决定节点是否可拖动,`checked`控制是否显示复...
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({ ...
-Grid中TemplateField生成到页面中控件具有唯一ID,例如Grid1_ct5_Label2,Grid1_ct6_Label2(feedback:geruger)。 +2009-09-27 v2.1.2 -为Tree控件增加GetExpandAllNodesReference和...
JSON中的节点属性如`text`(节点文本)、`id`(唯一标识符)、`leaf`(是否为叶子节点)和`cls`(附加CSS类名)定义了树节点的外观和行为。 9. **扩展功能**: TreePanel支持拖放(Drag and Drop, DnD)功能,...
### 学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点) #### 引言 在本篇文章中,我们将深入探讨如何使用YUI.Ext库中的TreePanel组件来实现异步获取树节点的功能。不同于同步加载方式,异步加载能够显著...
2. **主要方法** - `collapseAll()`: 收缩树中所有的节点。 - `expandAll()`: 展开所有的节点。 - `getRootNode()`: 获取树的根节点。 - `getNodeById(id)`: 通过节点ID查找并返回相应的节点对象。 - `expand(...
通过`Ext.create`方法创建了一个名为`TreeStore`的实例,并设置了其代理(`proxy`)属性为Ajax类型,以便能够从服务器端动态加载JSON格式的数据。 ```javascript var TreeStore = Ext.create('Ext.data.TreeStore',...
1. **Ext 类**:这是EXTJS的基础类,提供了许多实用的静态方法,如Ext.apply()用于对象属性的合并,Ext.id()用于生成唯一的ID。 2. **Array 类**:EXTJS扩展了JavaScript的数组对象,添加了一些实用的方法,如Ext....