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.