如何在 extJs 4.1 树面板中突出显示节点答案

【问题标题】：How to highlight a node In extJs 4.1 tree panel如何在 extJs 4.1 树面板中突出显示节点
【发布时间】：2013-08-27 00:53:18
【问题描述】：

我有一个 ExtJs 4.1 树面板。树有多个节点。现在我允许用户在树节点上执行包含搜索。因此，如果我对单词 ASP.NET 运行搜索，搜索应该突出显示所有文本包含关键字 ASP.NET 的节点

我该怎么做？

谢谢

【问题讨论】：

您觉得我的回答有帮助吗，还是不符合您的需要？

标签： javascript extjs extjs4.1

【解决方案1】：

您需要从 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

希望这会有所帮助！

【讨论】：