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

要让Ext JS后台管理的侧边导航默认处于折叠状态，有两种常用方法，根据你的代码场景选择：

方法一：直接在视图配置中设置默认折叠（推荐） #

找到侧边导航面板所在的视图文件（通常是MainHub.view.main.Main），在侧边栏组件的配置里添加collapsed: true（默认后台模板一般已开启collapsible: true，确保该配置存在）：

Ext.define('MainHub.view.main.Main', {
    extend: 'Ext.container.Viewport',
    layout: 'border',
    items: [
        {
            xtype: 'navigationtree', // 你的侧边导航树组件xtype
            region: 'west',
            collapsible: true,
            collapsed: true, // 开启默认折叠
            width: 250,
            reference: 'navigationTree' // 可选，方便控制器引用
        },
        {
            region: 'center',
            xtype: 'maincontent' // 主内容区域组件
        }
    ]
});

方法二：在控制器中初始化时触发折叠 #

如果无法修改视图代码，可以在你提供的MainController的onMainViewRender方法里，添加折叠逻辑。优先用lookupReference获取组件（需要视图里配置reference），比Ext.getCmp更可靠：

修改你的控制器代码：

onMainViewRender: function() {
    var me = this;

    Ext.getStore('NavigationTree').on('load', function() {
        if (!window.location.hash) {
            me.redirectTo('requests');
        }
        // 获取侧边导航组件并执行折叠
        var navTree = me.lookupReference('navigationTree');
        // 如果没有配置reference，也可以用组件id获取：
        // var navTree = Ext.getCmp('navigationTree');
        if (navTree) {
            navTree.collapse();
        }
    });

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

注意事项 #

• 确保侧边导航组件已经开启collapsible: true，否则collapsed配置和collapse()方法都无效。
• 尽量避免使用Ext.getCmp，因为组件id可能在复用或扩展时冲突，用reference结合控制器的lookupReference是更规范的方式。

内容的提问来源于stack exchange，提问作者Nicola Zilio