javascript - Extjs 6.2 树列表动态更改选择

Question

我正在使用 treelist，我想在 afterrender 函数上动态更改我对导航列表的选择。

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);
        }
    }
});

上面是我在渲染函数中的实验，用于在从树列表加载页面时默认打开“创建应用程序页面”。它打开了页面，但树列表上的实际选择没有发生，就像选择仍然很旧，这是我在过去两天遇到的问题，谁能帮我解决这个问题

Answer 1

您需要使用 treelist.setSelection(record)) treelist 的动态选择 更改方法.

根据您的要求，我创建了一个小 SENCHA FIDDLE 演示。希望这会帮助您或指导您实现您的要求。

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);
    }
});