`

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的文档!!

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

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

相关推荐

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