extjs4 tree如果获取节点属性

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

 

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

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

 

[javascript] view plain copy print ?

1. contextmenu : function(Ext.tree.TreeNode,Ext.EventObject e)  

contextmenu : function(Ext.tree.TreeNode,Ext.EventObject e)
这样到话就可以直接得到node对象，但在Ext4中变化好大了，传进来的没有Node对象，代码示例：

 

 

[javascript] view plain copy print ?

1. itemcontextmenu( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e)  

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 plain copy print ?

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.     },  

setNode: function(node) { var me = this; if (me.node && me.node != node) { me.mun(me.node, { expand: me.onNodeExpand, collapse: me.onNodeCollapse, append: me.onNodeAppend, insert: me.onNodeInsert, remove: me.onNodeRemove, sort: me.onNodeSort, scope: me }); me.node = null; } if (node) { <span style="color:#FF0000;">Ext.data.NodeInterface.decorate(node);</span> me.removeAll(); if (me.rootVisible) { me.add(node); } me.mon(node, { expand: me.onNodeExpand, collapse: me.onNodeCollapse, append: me.onNodeAppend, insert: me.onNodeInsert, remove: me.onNodeRemove, sort: me.onNodeSort, scope: me }); me.node = node; if (node.isExpanded() && node.isLoaded()) { me.onNodeExpand(node, node.childNodes, true); } } },标红到为关键代码，Ext.tree.View获得Ext.data.Model对象之后，将Ext.data.NodeInterface中Node相关的属性复制到Ext.data.Model中，看decorate的实现：

 

 

[javascript] view plain copy print ?

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: function(record) { if (!record.isNode) { var mgr = Ext.ModelManager, modelName = record.modelName, modelClass = mgr.getModel(modelName), idName = modelClass.prototype.idProperty, instances = Ext.Array.filter(mgr.all.getArray(), function(item) { return item.modelName == modelName; }), iln = instances.length, newFields = [], i, instance, jln, j, newField; modelClass.override(this.getPrototypeBody()); newFields = this.applyFields(modelClass, [ {name: idName, type: 'string', defaultValue: null}, {name: 'parentId', type: 'string', defaultValue: null}, {name: 'index', type: 'int', defaultValue: null}, {name: 'depth', type: 'int', defaultValue: 0}, {name: 'expanded', type: 'bool', defaultValue: false, persist: false}, {name: 'checked', type: 'auto', defaultValue: null}, {name: 'leaf', type: 'bool', defaultValue: false, persist: false}, {name: 'cls', type: 'string', defaultValue: null, persist: false}, {name: 'iconCls', type: 'string', defaultValue: null, persist: false}, {name: 'root', type: 'boolean', defaultValue: false, persist: false}, {name: 'isLast', type: 'boolean', defaultValue: false, persist: false}, {name: 'isFirst', type: 'boolean', defaultValue: false, persist: false}, {name: 'allowDrop', type: 'boolean', defaultValue: true, persist: false}, {name: 'allowDrag', type: 'boolean', defaultValue: true, persist: false}, {name: 'loaded', type: 'boolean', defaultValue: false, persist: false}, {name: 'loading', type: 'boolean', defaultValue: false, persist: false}, {name: 'href', type: 'string', defaultValue: null, persist: false}, {name: 'hrefTarget',type: 'string', defaultValue: null, persist: false}, {name: 'qtip', type: 'string', defaultValue: null, persist: false}, {name: 'qtitle', type: 'string', defaultValue: null, persist: false} ]); jln = newFields.length; for (i = 0; i < iln; i++) { instance = instances[i]; for (j = 0; j < jln; j++) { newField = newFields[j]; if (instance.get(newField.name) === undefined) { instance.data[newField.name] = newField.defaultValue; } } } } Ext.applyIf(record, { firstChild: null, lastChild: null, parentNode: null, previousSibling: null, nextSibling: null, childNodes: [] }); record.commit(true); record.enableBubble([ "append", "remove", "move", "insert", "beforeappend", "beforeremove", "beforemove", "beforeinsert", "expand", "collapse", "beforeexpand", "beforecollapse", "sort" ]); return record; }, 在decorate方法中复制了一系列树节点到相关属性和事件到Ext.data.Model中，并重写了getPrototypeBody方法

 

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