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.

Before re sizing the west region

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.

after re sizing west region

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

Pratik Patel Pratik Patel · Accepted Answer · 2014-04-29T07:01:46

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

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

3 Answers