Extjs 6.2 treelist动态变化选择

时间:2017-12-06 06:17:54

标签: javascript extjs treelist extjs6.2

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

zeroes = [[0], [0, 0], [0,0,0], [0,0,0,0]]

count = 1
for lst in zeroes:
    for i in range(len(lst)):
        lst[i] = count
        count += 2

print(zeroes)
# [[1], [3, 5], [7, 9, 11], [13, 15, 17, 19]]

上面是我在渲染功能中的实验,打开"创建应用程序页面"来自treelist的页面加载默认值。它打开了页面,但是对于没有像选择那样发生的树形图上的实际选择仍然很老,这是我过去两天所面临的问题,任何人都可以帮我解决问题

1 个答案:

答案 0 :(得分:1)

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

根据您的要求,我创建了一个小的 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);
    }
});