EXTJS 6.2 Treelist动态更改选择

Question

我正在使用Treelist，我想在后方函数上动态选择导航列表。

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

上面是我在渲染函数中的实验，以打开Treelist的页面加载的"创建应用程序页面"默认值。它打开了页面，但是对Treelist的实际选择不像选择那样旧，这是我过去两天所面临的问题，任何人都可以帮助我解决问题

Answer 1

您需要使用treelist.setSelection(record))方法进行动态selection treelist更改。

根据您的要求，我创建了一个小的 SENCHA小提琴演示。希望这将帮助您或指导您达到要求。

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