ExtJS 4.2.1 : Using "split" in border layout in panel, resize issue

Question

I have a panel with border layout. This panel has center region and a west region. In west region, there is a panel with border layout that contains 3 panels. See the picture below.

I use "split" so that the west region is re sizable using the splitter. The problem is, when I try to re size the west region, the inner panels are not re sized properly. See the picture below.

My code is very minimal and I see nothing wrong in it.

Here is the JSFiddle of my code And below is the code that generates these panels.

this.mainPanel = Ext.create('Ext.panel.Panel', {
    layout: 'border',
    height: 1000,
    width: 1400,
    items: [{
        xtype: 'panel',
        region: 'center',
        layout: 'border',
        id: 'center-panel',
        items: [{
            xtype: 'panel',
            layout: 'border',
            region: 'center',
            items: [{
                xtype: 'panel',
                region: 'center',
                id: 'grid-panel',
                layout: 'fit'
            }, {
                xtype: 'panel',
                id: 'south-panel',
                region: 'south',
                split: true,
                title: 'Additional data represented by this event',
                height: 200
            }]

        }]
    }, {
        xtype: 'panel',
        ref: 'west_panel',
        region: 'west',
        split: true,
        title: 'Show/Hide',
        width: 300,
        minWidth: 175,
        maxWidth: 500,
        items: [{
            xtype: 'panel',
            split: true,
            collapsed: true,
            title: 'Show/Hide by Time'
        }, {
            xtype: 'panel',
            split: true,
            collapsible: true,
            title: 'Show/Hide by activity types and tags'
        }, {
            xtype: 'panel',
            split: true,
            collapsible: true,
            title: 'Show/Hide by participant types and tags'
        }]
    }]
});
this.mainPanel.render(document.getElementById('example-grid'));

Any idea how I can fix this problem?

P.S. I am using ExtJS 4.2.1.883

Answer 1

This is how I got it fixed. I could not find a proper cause of the issue and hence its not a proper solution but its a simple work around that got it fixed.

To my west_panel which contained 3 inner panels, I added a listener to the "resize" event, which would forcefully re compute positions and sizes of west_panel's children. Below is the part of the code that shows my west_panel with its listener.

{
    xtype: 'panel',
    region: 'west',
    split: true,
    id: 'west_panel',
    title: 'Show/Hide',
    width: 300,
    minWidth: 175,
    maxWidth: 500,
    listeners: {
        resize: Ext.Function.bind(function(comp, width, height,
                oldWidth, oldHeight, eOpts) {
            comp.doLayout();
        }, this)
    },
    items: [{
      xtype: 'panel',
      split: true,
      collapsed: true,
      title: 'Show/Hide by Time'
    },

    // other code below
    // .
    // .
    // .
}

Answer 2

Configure layout:'accordion' on the west. See the accordion config options to fine tune it to your needs

Answer 3

I have solved this type issue before with a combination of MinWidth on the region, and FitLayout on the panels nested in the given region.

For example, I am currently working on a page that has a West region that is Collapsible, and Split = True. The MinWidth on the region is 200.

I have a TreePanel inside the region with Layout = FitLayout, and NO width related property values set. I have a black border style on the TreePanel that confirms it is resizing when I pull the splitbar on the region.

Let me know if you need more explanation. The key was to remove all width (autowidth included) related properties on the TreePanel and set its layout to Fit. MinWidth would not be required on the region; it exists for usability sake as the region can be collapsed as well.