How to collapse navigation panel by default in Ext JS admin dashboard?

Question

I want to modify the side navigation panel of an existing Ext JS app so that, when I open the app, instead of being expanded by default it is collapsed instead. I believe I am working with a slightly customized version of the default Ext JS admin dashboard.

Any suggestions?

Here's the code:

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

In addition to setting navigationTreeList.setMicro(true), the trick to avoid the Layout run failed error is to set a value for navigationTreeList.expandedWidth in onMainViewRender, like so

onMainViewRender: function () {

    var me = this,
        refs = me.getReferences(),
        navigationList = refs.navigationTreeList;

    refs.navigationTreeList.expandedWidth = 300;
    refs.logo.addCls('logo-collapsed');
    navigationList.setMicro(true);

}

I've updated my fiddle to shows how this can be done.

Answer 2

You are looking for

collapsed: true

An example looks like this:

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

Courtesy to https://fiddle.sencha.com/#view/editor&fiddle/2kvv