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

extjs, extjs4, extjs4.2, javascript

Solution

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
    // .
    // .
    // .
}

Problem

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

Original source