Layout: Flexible width left, fixed width right.

[wuschba]

Okay, perhaps I got to clean my glasses, but this is driving me nuts:

The panel is width:100%, it's easy to create a layout with 2 columns and 1 row, which does:
1. column (left): fixed size
2. column (right): filling the rest of the width when browser-window is resized

layout:'border',
width:'100%',
height:200,
items: [{
title: 'Center Panel',
region:'center',
},{
title: 'West Content',
region:'west',
width : 200,
}],

But what I want, is that the left coloum is resized while the right-column has a fixed width:
1. column (left): filling the rest of the width when browser-window is resized
2. column (right): fixed size

How is it done?

[pep]

Make the west your center and the center your east.

[wuschba]

Make the west your center and the center your east.

Thanks for your reply. That was what I tried first, but unfortunatly, it doesn't work: When shrinking the browser-window, the left col keeps its size and the right col is cut off till it's not visible anymore.

My code now is:

	var border = new Ext.Panel({
		title: 'Border Layout',
		layout:'border',
		width:'100%',
		height:200,
		items: [{
			title: 'Flexible Panel',
			region:'center',
			margins: '5 5 0 0',
		},{
			title: 'Fixed Panel',
			region:'east',
			margins: '5 0 0 5',
			cmargins: '5 5 0 5',
			width : 200,
		}],
		renderTo: bd
		});

I attached an image where you can see the result if you shrink the width of the browser-window after loading the page. YOu see that the fixed panel is not 200px anymore.

If you now reload the page, everything is okay again. Did I miss something? Do I have to tell the layout to re-layout itself?

[pep]

       var viewport = new Ext.Viewport({
            layout:'border',
            items:[{
                	region:'center',
                	title:'Center - fits any size'
			
			}
			,{
                	region:'east',
		    	title: 'East - fixed at 200',
			width : 200             
                	}
                ]
        });

viewport handles resizing

[wuschba]

Thanks again! But a Viewport is always height 100%, but I need a fixed height of 200px. Is there a way to do so?

[pep]

try adding monitorResize: true to the panel you are working with - that should resize it for you.

[wuschba]

Great. Thanks a lot!!