`

extjs4 tree如果获取节点属性

 
阅读更多

http://blog.csdn.net/leecho571/article/details/6799059

 

Ext4改了好多，树控件都改得自己不认识了，切入正题：

在Ext3中只要注册了'click','contextmenu'，就会将Node对象传进来，代码示例：

 

[javascript] view plaincopyprint?
  1. contextmenu : function(Ext.tree.TreeNode,Ext.EventObject e)  


这样到话就可以直接得到node对象，但在Ext4中变化好大了，传进来的没有Node对象，代码示例：

 

 

[javascript] view plaincopyprint?
  1. itemcontextmenu( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e)  

传进来到参数得不到Node对象就无法操纵树，今天看了源码，看了文档终于研究了好久才得出了一个结论：

其实record里面就包含了Ext3中treeNode到方法，recorrd就是Node对象。区别在于，Ext4中record只是完全跟数据相关，不跟页面展示发生关系，页面展示通过Ext.tree.View实现。

下面所一段Ext.tree.View中的源码：

 

[javascript] view plaincopyprint?
  1. setNode: function(node) {  
  2.         var me = this;  
  3.           
  4.         if (me.node && me.node != node) {  
  5.               
  6.             me.mun(me.node, {  
  7.                 expand: me.onNodeExpand,  
  8.                 collapse: me.onNodeCollapse,  
  9.                 append: me.onNodeAppend,  
  10.                 insert: me.onNodeInsert,  
  11.                 remove: me.onNodeRemove,  
  12.                 sort: me.onNodeSort,  
  13.                 scope: me  
  14.             });  
  15.             me.node = null;  
  16.         }  
  17.           
  18.         if (node) {  
  19.             <span style="color:#FF0000;">Ext.data.NodeInterface.decorate(node);</span>  
  20.             me.removeAll();  
  21.             if (me.rootVisible) {  
  22.                 me.add(node);  
  23.             }  
  24.             me.mon(node, {  
  25.                 expand: me.onNodeExpand,  
  26.                 collapse: me.onNodeCollapse,  
  27.                 append: me.onNodeAppend,  
  28.                 insert: me.onNodeInsert,  
  29.                 remove: me.onNodeRemove,  
  30.                 sort: me.onNodeSort,  
  31.                 scope: me  
  32.             });  
  33.             me.node = node;  
  34.             if (node.isExpanded() && node.isLoaded()) {  
  35.                 me.onNodeExpand(node, node.childNodes, true);  
  36.             }  
  37.         }  
  38.     },  

标红到为关键代码，Ext.tree.View获得Ext.data.Model对象之后，将Ext.data.NodeInterface中Node相关的属性复制到Ext.data.Model中，看decorate的实现：

 

 

[javascript] view plaincopyprint?
  1. decorate: function(record) {  
  2.             if (!record.isNode) {  
  3.                   
  4.                   
  5.                 var mgr = Ext.ModelManager,  
  6.                     modelName = record.modelName,  
  7.                     modelClass = mgr.getModel(modelName),  
  8.                     idName = modelClass.prototype.idProperty,  
  9.                     instances = Ext.Array.filter(mgr.all.getArray(), function(item) {  
  10.                         return item.modelName == modelName;  
  11.                     }),  
  12.                     iln = instances.length,  
  13.                     newFields = [],  
  14.                     i, instance, jln, j, newField;  
  15.   
  16.                   
  17.                 modelClass.override(this.getPrototypeBody());  
  18.                 newFields = this.applyFields(modelClass, [  
  19.                     {name: idName,      type: 'string',  defaultValue: null},  
  20.                     {name: 'parentId',  type: 'string',  defaultValue: null},  
  21.                     {name: 'index',     type: 'int',     defaultValue: null},  
  22.                     {name: 'depth',     type: 'int',     defaultValue: 0},   
  23.                     {name: 'expanded',  type: 'bool',    defaultValue: false, persist: false},  
  24.                     {name: 'checked',   type: 'auto',    defaultValue: null},  
  25.                     {name: 'leaf',      type: 'bool',    defaultValue: false, persist: false},  
  26.                     {name: 'cls',       type: 'string',  defaultValue: null, persist: false},  
  27.                     {name: 'iconCls',   type: 'string',  defaultValue: null, persist: false},  
  28.                     {name: 'root',      type: 'boolean', defaultValue: false, persist: false},  
  29.                     {name: 'isLast',    type: 'boolean', defaultValue: false, persist: false},  
  30.                     {name: 'isFirst',   type: 'boolean', defaultValue: false, persist: false},  
  31.                     {name: 'allowDrop', type: 'boolean', defaultValue: true, persist: false},  
  32.                     {name: 'allowDrag', type: 'boolean', defaultValue: true, persist: false},  
  33.                     {name: 'loaded',    type: 'boolean', defaultValue: false, persist: false},  
  34.                     {name: 'loading',   type: 'boolean', defaultValue: false, persist: false},  
  35.                     {name: 'href',      type: 'string',  defaultValue: null, persist: false},  
  36.                     {name: 'hrefTarget',type: 'string',  defaultValue: null, persist: false},  
  37.                     {name: 'qtip',      type: 'string',  defaultValue: null, persist: false},  
  38.                     {name: 'qtitle',    type: 'string',  defaultValue: null, persist: false}  
  39.                 ]);  
  40.   
  41.                 jln = newFields.length;  
  42.                   
  43.                 for (i = 0; i < iln; i++) {  
  44.                     instance = instances[i];  
  45.                     for (j = 0; j < jln; j++) {  
  46.                         newField = newFields[j];  
  47.                         if (instance.get(newField.name) === undefined) {  
  48.                             instance.data[newField.name] = newField.defaultValue;  
  49.                         }  
  50.                     }  
  51.                 }  
  52.             }  
  53.               
  54.             Ext.applyIf(record, {  
  55.                 firstChild: null,  
  56.                 lastChild: null,  
  57.                 parentNode: null,  
  58.                 previousSibling: null,  
  59.                 nextSibling: null,  
  60.                 childNodes: []  
  61.             });  
  62.               
  63.             record.commit(true);  
  64.               
  65.             record.enableBubble([  
  66.                   
  67.                 "append",  
  68.   
  69.                   
  70.                 "remove",  
  71.   
  72.                   
  73.                 "move",  
  74.   
  75.                   
  76.                 "insert",  
  77.   
  78.                   
  79.                 "beforeappend",  
  80.   
  81.                   
  82.                 "beforeremove",  
  83.   
  84.                   
  85.                 "beforemove",  
  86.   
  87.                    
  88.                 "beforeinsert",  
  89.                   
  90.                   
  91.                 "expand",  
  92.                   
  93.                   
  94.                 "collapse",  
  95.                   
  96.                   
  97.                 "beforeexpand",  
  98.                   
  99.                   
  100.                 "beforecollapse",  
  101.                   
  102.                   
  103.                 "sort"  
  104.             ]);  
  105.               
  106.             return record;  
  107.         },  
  108.           

在decorate方法中复制了一系列树节点到相关属性和事件到Ext.data.Model中，并重写了getPrototypeBody方法

 

在getPrototypeBody方法中，将树节点到操作复制到了Ext.data.Model中，比如：insertChild，remove，eachChild等方法，具体可以去查Ext.data.NodeInterface的文档!!

分享到：
| 互联网产品经理
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ExtJs4 Checkbox tree

    ExtJs4 Checkbox Tree是基于ExtJs 4框架实现的一种特殊树形组件，它在传统的树形结构基础上增加了复选框功能。这种组件常用于需要用户多选树形数据的场景，比如权限设置、目录选择等。下面将详细介绍ExtJs4 Checkbox...

    extjs的tree的使用

    Tree组件支持动态加载数据，这意味着在树展开时，可以异步地从服务器获取子节点数据，而不是一开始就加载所有数据，这在处理大量数据时非常有用。动态加载可以通过在`Ext.data.TreeStore`中设置`proxy`和`autoLoad`...

    ExtJs_TreeDemo

    - `Ext.data.TreeModel`定义了树节点的数据结构，包括节点ID、文本、是否为叶子节点、子节点列表等属性。 - `Ext.data.TreeStore`用于管理树节点数据，它可以连接到服务器进行异步加载。 3. **节点操作**： - `...

    extjs ajax tree（js动态树,无需递归）

    ExtJS AJAX Tree是一种基于JavaScript的动态树形结构，它利用AJAX技术来异步加载节点数据，无需在服务器端生成完整的树结构。这种方式可以显著提高页面加载速度，尤其是在处理大量数据时。ExtJS是一个功能丰富的...

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

    节点属性介绍 在TreePanel中，每个节点都具有一些关键属性，如`id`、`leaf`、`attributes`等： - **id**：节点的唯一标识符。 - **leaf**：表示该节点是否为叶子节点。 - **attributes**：节点的一些额外属性，...

    extjs-tree.zip_extjs tree

    "leaf": true // 如果没有子节点，设置此属性为true } ] } ``` 此外，还可以通过监听TreePanel的各种事件，如`itemclick`、`itemdblclick`等，实现节点的点击行为，或者添加自定义的操作按钮。例如，添加一个...

    extjs tree 节点 链接 新窗口

    你可以通过监听TreeNode的`click`事件来实现这个功能，如果节点有`href`属性，就在新窗口中打开： ```javascript tree.on('click', function(node, event) { if (node.href && event.button === 0) { // 鼠标左键...

    动态加载extjs tree

    4. **expand事件**: 当用户展开一个节点时，Tree会触发`expand`事件。在事件监听器中，可以调用TreeStore的`load`方法，传入需要加载的节点ID，向服务器发送请求获取子节点数据。 5. **load事件**: TreeStore的`...

    extjs tree 异步加载树型

    在异步加载中，children 属性通常为空或未定义，因为子节点数据将由 AJAX 请求获取。 3. **TreePanel**：显示树形结构的组件，需要配置 `store` 为 TreeStore，并可以设置 `rootVisible`（是否显示根节点）、`...

    ExtJs Tree

    通过ExtJs Tree，用户可以直观地展示数据之间的层级关系，并支持多种交互操作，如展开、折叠节点等。 ### 特性与功能 #### 树形面板（Treepanel） - **自动滚动**：通过`autoScroll`属性设置为`true`，确保当内容...

    Extjs chekboxtree PagingTreeLoader 多选、分页

    "Chekboxtree"是ExtJS中的一种特殊树形组件，它允许用户通过复选框选择树节点，这在需要对树结构数据进行批量操作或选择时非常实用。CheckboxTree.js文件可能包含了实现这种功能的核心代码，包括复选框的渲染、选中...

    extjs spring tree ajax

    如果数据包含子节点，这些子节点也会被动态加载。 6. **监听事件**：可以添加监听器来处理用户点击树节点等交互事件。例如，当用户展开一个节点时，可以通过Ajax发送新的请求获取子节点数据。 7. **优化性能**：...

    Extjs Tree + JSON + Struts2 例子

    ExtJS Tree 需要的数据结构是一个 JSON 数组，每个元素代表树的一个节点。节点可以包含属性如 "cls"（样式类）、"id"（唯一标识）、"leaf"（是否为叶子节点）以及 "children"（子节点数组）。例如： ```javascript ...

    extjs 树型分页组件

    在EXTJS中，树型组件（Tree）是一种常见的数据展示方式，特别适合于层次结构明显的数据组织。然而，当树节点数量庞大时，一次性加载所有数据不仅会消耗大量的系统资源，也会导致用户界面响应变慢，用户体验下降。...

    Extjs4的TreeGrid例子

    ExtJS 4是一个强大的JavaScript库，专用于构建富客户端应用程序，尤其在数据网格和树形视图方面表现出色。TreeGrid是ExtJS提供的一种复合组件，它结合了树形视图和数据网格的功能，允许用户同时展示层次结构数据和...

    extjs4 下拉菜单树 combobox+tree 支持单选多选

    在EXTJS4中，下拉菜单树（ComboBox+Tree）是一种高级UI组件，它结合了ComboBox的下拉选择框和TreePanel的树形结构，提供了一种用户友好的交互方式，用于展示层次化的数据。这种组件特别适用于需要从多个选项中进行...

    extjs4中panel的accordion布局以及treepanel导航

    2. 动态加载：TreePanel支持异步加载，即在用户滚动或展开节点时动态获取子节点数据，这有助于减少页面初始化时的数据量。 3. 节点操作：可以添加、删除、移动和编辑TreePanel中的节点，实现丰富的交互功能。 4. ...

    extjs 写的动态加载、增删改查、拖拽Tree（完整版）

    例如，使用`node.append()`添加新节点，`node.remove()`删除节点，`node.set()`更新节点属性，以及`treeView.doMove()`进行节点移动。这些操作通常需要与后端服务器进行数据同步，因此需要处理好Ajax请求。 拖拽...

    Extjs4使用要点个人整理

    1. **控件属性**：在`Extjs 控件属性.doc`中，可能会涵盖ExtJS 4中的各种组件（如窗口、面板、表格等）的常用属性。这些属性用于定义组件的行为、外观和交互方式。例如，宽度（width）、高度（height）、标题（title...

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

    // 从数据库获取节点数据 JSONObject json = new JSONObject(); json.put("children", nodes); return Action.SUCCESS; } // 构建TreeNode对象并返回... } ``` 这里，`getNodesFromDatabase()`方法根据需要...

Magicbox
Global site tag (gtag.js) - Google Analytics