javascript - Seaching for node in ExtJs tree - Stack Overflow

admin管理员组

文章数量:1279175

I want to search for specific node in an ExtJs tree. The current code that I have allows node to be searched only at the first level. Please check this fiddle

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

            children: [{

                text: '1.1 foo',
                leaf: false,
                children: [{

                    text: "1.1.1 asp mvc",
                    expanded: true
                }, {

                    text: "1.1.2 java",
                    expanded: true
                }, {

                    text: "1.1.3 extjs",
                    expanded: true
                }]
            }, {

                text: '1.2 bar',
                leaf: true
            }]

        }, {
            text: "ASP future",
            leaf: true
        }]
    }
});

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

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

What I want:

1. Ability to search across all the levels in the tree
2. once a node is found, I want to expand it.

How can I achieve this?

Thank you

I want to search for specific node in an ExtJs tree. The current code that I have allows node to be searched only at the first level. Please check this fiddle

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

            children: [{

                text: '1.1 foo',
                leaf: false,
                children: [{

                    text: "1.1.1 asp mvc",
                    expanded: true
                }, {

                    text: "1.1.2 java",
                    expanded: true
                }, {

                    text: "1.1.3 extjs",
                    expanded: true
                }]
            }, {

                text: '1.2 bar',
                leaf: true
            }]

        }, {
            text: "ASP future",
            leaf: true
        }]
    }
});

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

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

What I want:

1. Ability to search across all the levels in the tree
2. once a node is found, I want to expand it.

How can I achieve this?

Thank you

• javascript
• extjs
• extjs4.1

Share Improve this question Follow asked Sep 6, 2013 at 13:36 SharpCoderSharpCoder 19.2k4343 gold badges163163 silver badges258258 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You can use this :

 var c = rn.findChild("text","Also ASP",true);
 c.expand();

true indicates a deep search.Please have a look at findChild.

Please check out the fiddle

This is what I was looking for : http://jsfiddle/tdaXs/17/

Thank you Devendra for suggesting Deep Search option.

 var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true,
        children: [{
            text: "Javascript",
            leaf: true
        }, {
            text: "ASP",
            leaf: true
        }, {
            text: "Also ASP",
            leaf: false,
            children: [{
                text: '1.1 foo',
                leaf: false,
                children: [{
                    text: "1.1.1 ASP mvc",
                    leaf: true,
                    expanded: true
                }, {
                    text: "1.1.2 java",
                    leaf: true,
                    expanded: true
                }, {
                    text: "1.1.3 extjs",
                    leaf: true,
                    expanded: true
                }]
            }, {

                text: '1.2 bar',
                leaf: true
            }]

        }]
    }
});

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

                //var c = rn.findChild("text", " asp", true);

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

本文标签： javascriptSeaching for node in ExtJs treeStack Overflow