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