ExtJS динамически загружает хранилище древовидных панелей для создания древовидного меню

Question

Он хочет создать левое боковое меню, которое можно свернуть, если каждая опция является записью магазина.

Я попробовал код, который вы увидите ниже, и попытался использовать этот пример мой код ничего не производит

Ext.define('DashboardDigital.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'border',

    items: [{
        region: 'west',
        id: 'tree-menu-main',
        collapsible: true,
        collapsed: false,
        width: 300,
        items: [{
            title: 'Menu',
            xtype: 'treepanel',
            useArrows: true,
            rootVisible: false,
            collapsible: true,
            collapsed: false,
            hideCollapseTool: true,
            listeners: {
                beforerender: function(tree) {
                    var ts = Ext.create('Ext.data.TreeStore');
                    ts.setRootNode({
                        root: true,
                        expanded: true,
                        children: Ext.getStore('sStatus').data.items
                    });
                    Ext.getCmp('tree-menu-main').setStore(ts);

                }
            },
        }]
    }, {
        xtype: 'component',
        id: 'testid',
        region: 'center',
        cls: 'treelist-log',
        padding: 10,
        height: 50,
        bind: {
            html: '{selectionText}'
        }
    }]
});

Answer 1

Вот хороший образец для вас:

Ext.define('Fiddle.view.main.Main', {
    extend: 'Ext.container.Container',

    layout: 'border',
    items: [ {
        region: 'center',
        title: 'Center region',
        bodyPadding: 12,
        html: 'center'
    }, {
        region: 'west',
        title: 'Menu',
        width: 200,
        collapsible: true,
        split: true,
        bodyPadding: 12,
        layout: 'anchor',
        items: [{
            xtype : 'treelist',
            store : new Ext.data.TreeStore({
                root: {
                    expanded: true,
                    children: [{
                        text: 'Home',
                        iconCls: 'x-fa fa-home',
                        children: [{
                            text: 'Messages',
                            iconCls: 'x-fa fa-inbox',
                            leaf: true
                        },{
                            text: 'Archive',
                            iconCls: 'x-fa fa-database',
                            children: [{
                                text: 'First',
                                iconCls: 'x-fa fa-sliders',
                                leaf: true
                            },{
                                text: 'No Icon',
                                iconCls: null,
                                leaf: true
                            }]
                        },{
                            text: 'Music',
                            iconCls: 'x-fa fa-music',
                            leaf: true
                        },{
                            text: 'Video',
                            iconCls: 'x-fa fa-film',
                            leaf: true
                        }]
                    },{
                        text: 'Users',
                        iconCls: 'x-fa fa-user',
                        children: [{
                            text: 'Tagged',
                            iconCls: 'x-fa fa-tag',
                            leaf: true
                        },{
                            text: 'Inactive',
                            iconCls: 'x-fa fa-trash',
                            leaf: true
                        }]
                    },{
                        text: 'Groups',
                        iconCls: 'x-fa fa-group',
                        leaf: true
                    },{
                        text: 'Settings',
                        iconCls: 'x-fa fa-wrench',
                        children: [{
                            text: 'Sharing',
                            iconCls: 'x-fa fa-share-alt',
                            leaf: true
                        },{
                            text: 'Notifications',
                            iconCls: 'x-fa fa-flag',
                            leaf: true
                        },{
                            text: 'Network',
                            iconCls: 'x-fa fa-signal',
                            leaf: true
                        }]
                    }]
                }
            })
        }]
    }]
});

Ext.application({

    name: 'Fiddle',
    mainView: 'Fiddle.view.main.Main',
    launch: function() {

    }
});

Answer 2

Вы устанавливаете store для компонента west: Ext.getCmp('tree-menu-main').setStore(ts);, что неправильно. Вы должны присвоить id пункту меню и установить для него сохранение.