[英]How to highlight a node In extJs 4.1 tree panel
我有一個ExtJs 4.1樹面板。 樹有多個節點。 現在我允許用戶在樹節點上執行包含搜索。 因此,如果我在ASP.NET
上運行搜索,搜索應該突出顯示文本包含關鍵字ASP.NET
所有節點
我怎樣才能做到這一點?
謝謝
您需要從TreePanel
的根節點搜索子節點,然后使用RegEx測試節點與搜索文本的值。
工作實例
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/
提示:記下TreePanel
的selectionModel
的.select()
方法中的第二個參數。 這是可選的keepExisting
參數,在手動選擇節點時必須將其設置為true
。 請參閱文檔: http : //docs.sencha.com/extjs/4.1.0/#!/api/Ext.selection.Model-method-select
希望這可以幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.