[英]How to highlight a node In extJs 4.1 tree panel
I have a ExtJs 4.1 tree panel. 我有一个ExtJs 4.1树面板。 The tree is having multiple nodes.
树有多个节点。 Now I allow user to perform contains search on tree node.
现在我允许用户在树节点上执行包含搜索。 So if I run the search on word
ASP.NET
, the search should highlight all the nodes who's text contains key word ASP.NET
因此,如果我在
ASP.NET
上运行搜索,搜索应该突出显示文本包含关键字ASP.NET
所有节点
How Can I do this? 我怎样才能做到这一点?
Thank you 谢谢
You need to search for children from the TreePanel
's root node, then use RegEx to test the value of the Node vs your search text. 您需要从
TreePanel
的根节点搜索子节点,然后使用RegEx测试节点与搜索文本的值。
Working Example 工作实例
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);
}
});
}
}]
}]
});
Working jsFiddle : http://jsfiddle.net/tdaXs/ 工作jsFiddle : http : //jsfiddle.net/tdaXs/
TIP: Take note of the second parameter in the .select()
method of the TreePanel
's selectionModel
. 提示:记下
TreePanel
的selectionModel
的.select()
方法中的第二个参数。 This is the optional keepExisting
parameter, which must be set to true
when manually selecting nodes. 这是可选的
keepExisting
参数,在手动选择节点时必须将其设置为true
。 See the docs: http://docs.sencha.com/extjs/4.1.0/#!/api/Ext.selection.Model-method-select 请参阅文档: http : //docs.sencha.com/extjs/4.1.0/#!/api/Ext.selection.Model-method-select
Hope this helps! 希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.