Extjs 6.2 treelist change selection dynamically

Question

I am using treelist and I want to change dynamically my selection of navigation list on afterrender function.

Ext.create({
    xtype: 'treelist',
    reference: 'navigationTreeList',
    itemId: 'navigationTreeList',
    ui: 'nav',
    store: Ext.create('Ext.data.Store', {
        fields: [{
            name: 'text'
        }],
        root: {
            expanded: true,
            children: [{
                    text: 'Dashboard',
                    iconCls: 'x-fa fa-home',
                    rowCls: 'nav-tree-badge',
                    viewType: 'dashboardcei',
                    routeId: 'cei/dashboardcei',
                    leaf: true
                },
                {
                    text: 'Create Application',
                    iconCls: 'x-fa fa-send',
                    rowCls: 'nav-tree-badge',
                    routeId: 'cei/create-application',
                    viewType: 'create-application',
                    leaf: true
                },
                {
                    text: 'Application Status',
                    iconCls: 'x-fa fa-user',
                    routeId: 'cei/application-status',
                    viewType: 'application-status',
                    leaf: true
                }
            ]
        }
    }),
    width: 250,
    expanderFirst: false,
    expanderOnly: false,
    listeners: {
        afterrender: function(tree) {

            var selection = tree.getStore().getData().items[1]; // bydefault "create application page should be open instead of dashboard"
            tree.fireEvent('selectionchange', tree, selection);
        }
    }
});

above is my experiment in render function to open "create application page" default on page load from treelist. its opening the page but the actual selection on treelist not happening like selection remains old that's the issue I was facing from last two day's can anyone please help me to solve the problem

Answer 1

You need to use treelist.setSelection(record)) method for dynamic selection change of treelist.

As per your requirement, I have created a small SENCHA FIDDLE demo. Hope this will help you or guide you to achieve your requirement.

Ext.create('Ext.panel.Panel', {
    layout: 'hbox',
    title: 'Navigation tree list example',
    renderTo: Ext.getBody(),
    border: 1,
    height: window.innerHeight,
    viewModel: {
        selection: null
    },
    style: {
        borderColor: '#ccc',
        borderStyle: 'solid',
        borderWidth: '1px'
    },
    items: [{
        xtype: 'treelist',
        flex: 0.30,
        store: {
            root: {
                expanded: true,
                children: [{
                    text: 'Dashboard',
                    id: 'dashboard',
                    iconCls: 'x-fa fa-home',
                    rowCls: 'nav-tree-badge',
                    viewType: 'dashboardcei',
                    routeId: 'cei/dashboardcei',
                    leaf: true
                }, {
                    text: 'Create Application',
                    id: 'createapp',
                    iconCls: 'x-fa fa-send',
                    rowCls: 'nav-tree-badge',
                    routeId: 'cei/create-application',
                    viewType: 'create-application',
                    leaf: true
                }, {
                    text: 'Application Status',
                    id: 'appstatus',
                    iconCls: 'x-fa fa-user',
                    routeId: 'cei/application-status',
                    viewType: 'application-status',
                    leaf: true
                }]
            }
        },
        listeners: {
            selectionchange: function (tree, node) {
                this.up('panel').getViewModel().set('selection', node);
            }
        }
    }, {
        margin: '10 0 0 0',
        flex: 0.70,
        height: '100%',
        bind: {
            title: '{selection.text}'
        },
        style: {
            borderColor: '#ccc',
            borderStyle: 'solid',
            borderWidth: '1px'
        },
        itemId: 'rightPanel'
    }],
    buttons: [{
        text: 'Dashboard',
        name: 'dashboard',
        handler: function () {
            this.up('panel').doSetNode(this);
        }
    }, {
        text: 'Create Application',
        name: 'createapp',
        handler: function () {
            this.up('panel').doSetNode(this);
        }
    }, {
        text: 'Application Status',
        name: 'appstatus',
        handler: function () {
            this.up('panel').doSetNode(this);
        }
    }],
    //function will fire on bottom button click
    doSetNode: function (button) {
        var tree = this.down('treelist'),
            newSelection = tree.getStore().findRecord('id', button.name);
        tree.setSelection(newSelection);
    }
});