如何突出顯示節點在extJs 4.1樹面板中

Question

我有一個ExtJs 4.1樹面板。樹有多個節點。現在我允許用戶在樹節點上執行包含搜索。因此，如果我在單詞ASP.NET上執行搜索，則搜索應突出顯示所有包含關鍵詞的文本的節點。ASP.NET

如何才能做到這一點？

謝謝

Answer 1

你需要搜索從TreePanel的根節點的孩子，然後用正則表達式來測試節點的值VS搜索文本。

工作實施例

var store = Ext.create('Ext.data.TreeStore', { 
    root: { 
    expanded: true, 
    children: [ 
     { text: "Javascript", leaf: true }, 
     { text: "ASP.net", leaf: true }, 
     { text: "Also ASP.net", leaf: true } 
    ] 
    } 
}); 

Ext.create('Ext.tree.Panel', { 
    title: 'Example Tree', 
    width: 200, 
    height: 150, 
    store: store, 
    rootVisible: false, 
    multiSelect: true, 
    renderTo: Ext.getBody(), 
    dockedItems: [{ 
    xtype: 'toolbar', 
    dock : 'bottom', 
    items : [{ 
     text: 'Search for ASP.net', 
     handler: function(){ 
      var me = this, 
       panel = me.up('panel'), 
       rn = panel.getRootNode(), 
       regex = new RegExp("ASP.net"); 

      rn.findChildBy(function(child){ 
       var text = child.data.text; 
       if(regex.test(text) === true){ 
        panel.getSelectionModel().select(child, true); 
       } 
      }); 
     } 
    }] 
    }] 
}); 

工作的jsfiddle：http://jsfiddle.net/tdaXs/

TIP：。注意到在TreePanel的selectionModel的.select()方法的第二個參數。這是可選的keepExisting參數，手動選擇節點時必須將其設置爲true。見文檔：http://docs.sencha.com/extjs/4.1.0/#!/api/Ext.selection.Model-method-select

希望這有助於！