如何在 Ext JS 管理仪表板中默认折叠导航面板？

Question

我想修改现有 Ext JS 应用程序的侧面导航面板，以便当我打开应用程序时，它不是默认展开，而是折叠。我相信我正在使用默认 Ext JS 管理仪表板的稍微定制版本。

有什么建议吗？

这是代码：

Ext.define('MainHub.view.main.MainController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.main',

    listen: {
        controller: {
            '#': {
                unmatchedroute : 'onRouteChange'
            }
        }
    },

    routes: {
        ':node': 'onRouteChange'
    },

    lastView: null,

    onMainViewRender: function() {
        var me = this;

        Ext.getStore('NavigationTree').on('load', function() {
            if (!window.location.hash) {
                me.redirectTo('requests');
            }
        });

        if (!USER.is_staff) {
            Ext.getCmp('adminSiteBtn').hide();
        }
    },

    onNavigationTreeSelectionChange: function(tree, node) {
        var to = node && (node.get('routeId') || node.get('viewType'));

        if (to) {
            this.redirectTo(to);
        }
    },

    ...

    }
});

Answer 1

您正在寻找

collapsed: true

一个例子如下：

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('Ext.panel.Panel', {
            title: 'Hello',
            collapsed: true,
            collapsible: true,
            width: 200,
            html: '<p>World!</p>',
            renderTo: Ext.getBody(),
            listeners: {
                beforerender: function(panelObj){
                    if(true){//your condition
                        panelObj.toggleCollapse();//this expands the panel. As initially its in collapsed state.
                    }
                }
            }
        });
    }
});

感谢https://fiddle.sencha.com/#view/editor&fiddle/2kvv