2013-12-23 100 views
0

我正在使用ExtJs 4.1樹面板。該模型有4個領域。我需要通過'名稱'字段搜索節點,然後我想更新返回節點的屬性之一。達到此目的的最佳方法是什麼?在ExtJs 4.1樹面板中按ID或名稱查找節點

我總是可以得到根節點,然後使用下面的代碼。

    var rn = tree .getRootNode(); 
        var regex = new RegExp('some value', 'i'); 
        rn.findChildBy(function (child) { 
        Ext.onReady(function() { 
        if(child.data.Name == 'XXXX'){ 
        //DO soething 
         } 
        }); 

但這是搜索一個節點的最佳方式?

實際的樹面板

Ext.QuickTips.init(); 

    //we want to setup a model and store instead of using dataUrl 
    Ext.define('Task', { 
     extend: 'Ext.data.Model', 

     fields: [{ 
      name: 'task', 
      type: 'string' 
     }, { 
      name: 'user', 
      type: 'string' 
     }, { 
      name: 'duration', 
      type: 'string' 
     }, { 
      name: 'done', 
      type: 'boolean' 
     }] 
    }); 

    var store = Ext.create('Ext.data.TreeStore', { 
     model: 'Task', 


     proxy: { 
      type: 'memory' 

     }, 
     root: { 
      "text": ".", 
      children: [{ 
       task: 'First Child', 
       duration: 6.5, 
       user: 'Tommy Maintz', 
       leaf: true, 
       iconCls: 'task' 

      }, { 
       task: 'Testing', 
       duration: 2, 
       user: 'Core Team', 
       iconCls: 'task-folder', 
       children: [{ 
        task: 'Testing First Child', 
        duration: 6.5, 
        user: 'Tommy', 
        leaf: true, 
        iconCls: 'task' 

       }, { 
        task: 'Mac OSX', 
        duration: 0.75, 
        user: 'Tommy Maintz', 
        iconCls: 'task-folder', 
        children: [{ 
         task: 'FireFox', 
         duration: 0.25, 
         user: 'Tommy Maintz', 
         iconCls: 'task', 
         leaf: true 
        }, { 
         task: 'Safari', 
         duration: 0.25, 
         user: 'Tommy Maintz', 
         iconCls: 'task', 
         leaf: true 
        }, { 
         task: 'Chrome', 
         duration: 0.25, 
         user: 'Tommy Maintz', 
         iconCls: 'task', 
         leaf: true 
        }] 
       }, { 
        task: 'Windows', 
        duration: 3.75, 
        user: 'Darrell Meyer', 
        iconCls: 'task-folder', 
        children: [{ 
         task: 'FireFox', 
         duration: 0.25, 
         user: 'Darrell Meyer', 
         iconCls: 'task', 
         leaf: true 
        }, { 
         task: 'Safari', 
         duration: 0.25, 
         user: 'Darrell Meyer', 
         iconCls: 'task', 
         leaf: true 
        }, { 
         task: 'Chrome', 
         duration: 0.25, 
         user: 'Darrell Meyer', 
         iconCls: 'task', 
         leaf: true 
        }, { 
         task: 'Internet Exploder', 
         duration: 3, 
         user: 'Darrell Meyer', 
         iconCls: 'task', 
         leaf: true 
        }] 
       }, { 
        task: 'Linux', 
        duration: 0.5, 
        user: 'Aaron Conran', 
        iconCls: 'task-folder', 
        children: [{ 
         task: 'FireFox', 
         duration: 0.25, 
         user: 'Aaron Conran', 
         iconCls: 'task', 
         leaf: true 
        }, { 
         task: 'Chrome', 
         duration: 0.25, 
         user: 'Aaron Conran', 
         iconCls: 'task', 
         leaf: true 
        }] 
       }] 
      }] 
     }, 
     folderSort: true 
    }); 

    //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel 
    var tree = Ext.create('Ext.tree.Panel', { 
     title: 'Core Team Projects', 
     width: 700, 
     height: 500, 
     renderTo: Ext.getBody(), 
     collapsible: true, 
     useArrows: true, 
     rootVisible: false, 
     store: store, 
     multiSelect: true, 
     singleExpand: false, 
     //the 'columns' property is now 'headers' 
     columns: [{ 
      xtype: 'treecolumn', //this is so we know which column will show the tree 
      text: 'Task', 
      flex: 2, 
      sortable: true, 
      dataIndex: 'task' 
     }, { 
      //we must use the templateheader component so we can use a custom tpl 
      xtype: 'templatecolumn', 
      text: 'Duration', 
      flex: 1, 
      sortable: true, 
      dataIndex: 'duration', 
      align: 'center', 
      //add in the custom tpl for the rows 
      tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', { 
       formatHours: function(v) { 
        if (v < 1) { 
         return Math.round(v * 60) + ' mins'; 
        } else if (Math.floor(v) !== v) { 
         var min = v - Math.floor(v); 
         return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm'; 
        } else { 
         return v + ' hour' + (v === 1 ? '' : 's'); 
        } 
       } 
      }) 
     }, { 
      text: 'Assigned To', 
      flex: 1, 
      dataIndex: 'user', 
      sortable: true 
     }] 
    }); 
}); 

回答

0

我們可以用findChild方法 - 它需要的屬性名稱&需要被搜索參數的值。

檢查以下鏈接的答案:Answer