Select node in treepanel by default

Question

I am using extjs 3.4

I would like to have preselected node when treepanel first loads. In my example this would be second node. Same thing as mouse click on that node - just it happens by default on selected node. So, how can I simulate mouse click on second node? (or just make it active item by default)

Ext.ns('App.Misc.West');

App.Misc.West.View = Ext.extend(Ext.Panel, {
    constructor: function (config) {
        var me = this;
        var cfg = {
            items: [{
                xtype: 'treepanel',
                ref: 'treeMisc',
                id: 'treeMisc',
                root: new Ext.tree.AsyncTreeNode({
                    expanded: true,
                    text: 'Data tables',
                    children: [{
                        text: 'Books',
                        bookTitle: 'Books',
                        leaf: true
                    }, {
                        text: 'Cars',
                        bookTitle: 'Cars',
                        leaf: true
                    }]
                }),
                rootVisible: true
            }]
        };
        Ext.apply(cfg, config);
        App.Misc.West.View.superclass.constructor.call(me, cfg);
    }
});

Arthur Rubens Arthur Rubens · Accepted Answer · 2021-01-14T17:36:43

You can use checked (multiple selection with checkbox) or select programmatically in the 'load' and node 'expand' handlers:

new Ext.tree.TreePanel({
    region: 'west',
    collapsible: true,
    title: 'Navigation',
    xtype: 'treepanel',
    width: 200,
    autoScroll: true,
    split: true,
    loader: new Ext.tree.TreeLoader({
        listeners: {

        }
    }),
    root: new Ext.tree.AsyncTreeNode({
        expanded: true,
        text: 'Data tables',
        children: [{
            text: 'Books',
            bookTitle: 'Books',
            leaf: true
        }, {
            text: 'Cars',
            bookTitle: 'Cars',
            leaf: true,
            //checked: true // <-- selected with checkbox
        }]
    }),
    rootVisible: false,
    listeners: {
        // Single selection (simulated mouse click)
        load: function (treeLoader, node) {
            this.getRootNode().on('expand', function (node) {
                this.getSelectionModel().select(this.getRootNode().childNodes[1]);
            }, this);
        }
    },
    renderTo: Ext.getBody()
});

Select node in treepanel by default

1 Answers