Skip to content

January 9, 2016

ExtJs5: Notes on Collapsing Panel in BorderLayout

by Joe Kuan

Suppose we have a panel with borderlayout. The center region is a tab panel with two tabs: Expand and Collapse, whereas the south region is a collapsible panel. The whole idea is to program by clicking ‘Expand’ and ‘Collapse’ tabs which will automatically expand and collapse the south panel respectively. The following is the screenshot:

screen

Here is the very basic ExtJs code for the view:

Ext.define('MyApp.view.Demo', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.demo',
    requires: [
        'MyApp.view.DemoViewModel',
        'MyApp.view.DemoViewController',
        'Ext.tab.Panel',
        'Ext.tab.Tab'
    ],
    controller: 'demo',
    viewModel: {
        type: 'demo'
    },
    layout: 'fit',
    items: [{
            xtype: 'panel',
            height: 250,
            width: 400,
            layout: 'border',
            title: 'Center Panel',
            items: [{
                    xtype: 'tabpanel',
                    region: 'center',
                    activeTab: 0,
                    items: [{
                            xtype: 'panel',
                            title: 'Expand',
                            listeners: {
                                activate: 'onExpandTabActivate'
                            }
                        }, {
                            xtype: 'panel',
                            title: 'Collapse',
                            listeners: {
                                activate: 'onCollapseActivate'
                            }
                        }
                    ]
                }, {
                    xtype: 'panel',
                    region: 'south',
                    split: true,
                    reference: 'south_panel',
                    height: '50%',
                    collapsible: true,
                    title: 'South Panel'
                }
            ]
        }
    ]
});

Each tab in the center region contains an activate listener which is called when the user clicks on the tab. As for the south region panel, we configure it with split resize bar between the regions (split: true) and the panel is collapsible with a minimize tool icon at the top right corner. Since the tabs’ listeners are implemented in the ViewController class, therefore we need a method to refer the south region within the ViewController. To facilitate that, we add a reference option with the name ‘south_panel‘, so that we can easily retrieve the component within the ViewController class.

Next step is to implement tab event handlers in the view controller. Here is the code:

Ext.define('MyApp.view.DemoViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.demo',

    onExpandTabActivate: function(component, eOpts) {
        var sp = this.lookupReference("south_panel");
        sp.expand();
    },

    onCollapseActivate: function(component, eOpts) {
        var sp = this.lookupReference("south_panel");
        sp.collapse();
    }
});

Everything should work as expected. However, as soon as we click the ‘Collapse’ tab, a Javascript error, “Uncaught TypeError: Cannot read property ‘hide’ of undefined“, is occurred. Here is a screenshot of the error:

screen

Moreover, if we initially click on the minimize tool icon to collapse panel, it works and subsequently clicking on the Expand/Collapse tabs also works correctly. The problem is clicking on the Collapse tab before the minimize tool icon.

After some digging, the config that is most relevant to this area is the collapseMode option. According to the documentation, it should work without specifying collapseMode. However, we can workaround with other configurable values which are header or mini. Header means the panel collapses and the header is still in display whereas mini is just the split bar is shown without the collapsed panel header.
After we specify the collapseMode option with header value, the application works as the way we expected.

      xtype: 'panel',
      region: 'south',
      split: true,
      reference: 'south_panel',
      height: '50%',
      collapsible: true,
      collapseMode: 'header',
      title: 'South Panel'
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: