javascript - extJs 4.1ツリーパネルでノードを強調表示する方法

Question

ExtJs 4.1 ツリー パネルがあります。ツリーには複数のノードがあります。これで、ユーザーがツリー ノードで含む検索を実行できるようになりました。したがって、 wordASP.NETで検索を実行すると、テキストにキーワードが含まれるすべてのノードが強調表示されます。ASP.NET

これどうやってするの？

ありがとうございました

Answer 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/

ヒント:.select()のメソッドのTreePanel2番目のパラメータに注意してくださいselectionModel。これはオプションのkeepExistingパラメータで、true手動でノードを選択するときに設定する必要があります。ドキュメントを参照してください: http://docs.sencha.com/extjs/4.1.0/#!/api/Ext.selection.Model-method-select

お役に立てれば！