[2.2] IE BorderLayout: Nested west panel width set to 0 inside collapsed south panel

[reycri]

I did a search but could not find a case exactly like this:

function go()
{
	var p = new Ext.Panel({
			renderTo: "here",
			width: 700,
			height: 500,
			layout: "border",
			items: [
					{
						region: "center",
						html: "This is the main panel"
					},
					{
						region: "south",
						layout: "border",
						region: "south",
						split: true,
						collapsible: true,
						collapseMode: "mini",
						collapsed: true,
						height: 234,
						items: [
								{
									region: "west",
									split: true,
									hideMode: "offsets",
									width: 180,
									html: "this is lower left pane."
								},
								{
									region: "center",
									html: "this is lower main pane."
								}
							]
					}
				]
		});
}
Ext.onReady(go);

When the south panel is expanded (using the mini expander on the split bar), you will see that the nested west panel's width is 0 (instead of 180).

If you set the collapsed property to false on the south panel. It works as expected.

I tried the usual workaround of setting hideMode to "offsets" or "visibility" (as mentioned in other threads related to tab panels). But none of the combinations I tried worked.

Thanks in advance...

[Condor]

Did you add hideMode:'offsets' to the south panel?

[reycri]

Yes... and I tried it again just to be sure.
Unfortunately, it didn't solve this problem.
Thanks, though...

[Animal]

A perfect example of why you should indent with spaces.

But anyway, pasting this code into the console in one of the example pages:

Ext.getBody().update('');
var p = new Ext.Panel({
    title: 'Test',
    renderTo: document.body,
    width: 700,
    height: 500,
    layout: "border",
    items: [{
        region: "center",
        html: "This is the main panel"
    }, {
        region: "south",
        layout: "border",
        region: "south",
        split: true,
        collapsible: true,
        collapseMode: "mini",
        collapsed: true,
        height: 234,
        items: [{
            region: "west",
            split: true,
            hideMode: "offsets",
            width: 180,
            html: "this is lower left pane."
        }, {
            region: "center",
            html: "this is lower main pane."
        }]
    }]
});

When I expanded that collapsed south produced:



What is 'here' in you page?

[Condor]

@Animal: IE6/7 doesn't have a console, so how did you manage to paste your code there?

@reycri: Yes, hideMode doesn't work here...

[Condor]

Let's solve this Ext 6/7 collapsed borderlayout sizing problem once and for all:

Ext.override(Ext.layout.BorderLayout.Region, {
	getSize : function(){
		return this.isCollapsed ? this.getCollapsedEl().getSize() : 
			(Ext.isIE ? this.panel.getPositionEl().getStyleSize() : this.panel.getSize());
	}
});

[reycri]

@Animal: Sorry for the excessive indents, my editor uses only 4 spaces per tab. 'here' is the id of an empty div element in my sample page. This problem only occurs in IE - I tried IE6 and IE7.

@Condor: The override you provided didn't work. Immediately after the page renders (while the lower pane is still collapsed), I inspected the lower left pane and its offsetWidth property is 0. It's styles.width is "0px". I used the "IE Developer Toolbar" to inspect this.

[Condor]

OK, now try this solution:

Ext.override(Ext.Container, {
	doLayout : function(shallow){
		if(!this.isVisible() || this.collapsed){
			this.deferLayout = this.deferLayout || !shallow;
			return;
		}
		if(this.rendered && this.layout){
			this.layout.layout();
		}
		if(shallow !== false && this.items){
			var cs = this.items.items;
			for(var i = 0, len = cs.length; i < len; i++) {
				var c  = cs[i];
				if(c.doLayout){
					c.doLayout();
				}
			}
		}
	},
	onShow : function(){
		Ext.Container.superclass.onShow.apply(this, arguments);
		if(c.deferLayout !== undefined){
			var deep = this.deferLayout;
			delete this.deferLayout;
			c.doLayout(!deep);
		}
	}
});
Ext.override(Ext.Panel, {
	afterExpand : function(){
		this.collapsed = false;
		this.afterEffect();
		if(c.deferLayout !== undefined){
			var deep = this.deferLayout;
			delete this.deferLayout;
			c.doLayout(!deep);
		}
		this.fireEvent('expand', this);
	}
});

[mjlecomte]

... excessive indents, my editor uses only 4 spaces per tab.

Have your IDE convert tabs to spaces, or use another tool like:
http://jsbeautifier.org/

[reycri]

Thanks, Condor, that worked perfectly.
So this fix is obviously not in v2.2.1...
Will this fix be in v3.x?