1

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

    ...

    }
});
Nicola Zilio
  • 355
  • 6
  • 15

2 Answers2

0

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

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
  • Yes, I am aware of the `collapsed` prop, but I think this is a bit more complicated than that, the collapsed state of the navigation panel is controlled by this function https://github.com/maxplanck-ie/parkour2/blob/080864f4a7239e373c89dd9d02260a25718819cc/parkour_app/static/main-hub/app/view/main/MainController.js#L41 – Nicola Zilio Aug 06 '23 at 11:21
  • @NicolaZilio can you create a minimal reproducible example of your scenario? – Lajos Arpad Aug 06 '23 at 12:18
  • here it is https://fiddle.sencha.com/#view/editor&fiddle/3ov0 (it took me a while to figure out how to create a fiddle for this). It is a minimal example, but it renders the idea. What I am trying to do is to have the side panel collapsed when the page is first opened. – Nicola Zilio Aug 09 '23 at 08:31
  • @NicolaZilio thanks for the Fiddle. I have looked into it and `collapsed: true` indeed did not change the behavior. I leave my answer here for the time being, because it may be potentially useful, but I can confirm that you are correct in your assessment about it and the behavior you have mentioned is indeed reproducing. – Lajos Arpad Aug 09 '23 at 09:20
  • After some trying, I managed to achieve what I want by adding a few lines to `onMainViewRender` in `view.mainController`, which I ripped off of `onToggleNavigationSize` in the same file. This almost works, except for one thing. When I hover over an entry in the initially collapsed menu, rendering of the flyout tab raises a `Layout run failed` error (although you don't see it the tab spans the entire width of the screen). If I click on the hamburger button to expand and recollapse the navigation menu, this error goes away. Any ideas why? The fiddle is updated. – Nicola Zilio Aug 14 '23 at 09:40
0

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.

Nicola Zilio
  • 355
  • 6
  • 15