Good day everyone.

Currently I'm working on web application, that uses min-width / max-width CSS rules to control application layout width.
HTML Code:
<div class="app-wrapper">
	<div class="app-header"></div>
	<div id="applicationBody"></div>
	<div class="app-footer"></div>
</div>

<style>
.app-wrapper { width:90%; min-width:950px; max-width:1300px; margin:auto; position:relative; }
</style>
<div id=applicationBody> is used to render Extjs components, I'm using column layout to display different types of controls.

The problem is that once panel is rendered it's doesn't follow the width of the parent container. Is there are simple way to make it work as expected? Right now I'm using workaround, i'm binding onResize event to the Window object and calling doLayout() every time browser window is get resized.

Code:
var panel = new Ext.Panel({
	autoHeight: true,
	renderTo: Ext.get('applicationBody'),
	cls: 'app-body',
	layout: 'column',
	items: [
		{ id: 'sidebar' },
		{ id: 'contentArea' }
	],
	listeners: {
		'render': function(){
			var resizeTimer;
			
			Ext.select(window).on('resize', function(e,t){
				if(resizeTimer) 
					window.clearInterval(resizeTimer);
					
				resizeTimer = window.setTimeout(function(){
					panel.doLayout();
				}, 50);
			});				
		}
	}
});
Please, advice! Thanks.