ExtJs 4.1 - Issue with a fluid form inside a window
===

We have to create a fluid layout meeting following conditions:

1. There is a Form inside a Window.

2. If Window Width is increased, then Form Width and its Fields Width should also increase.

3. If Window Width is decreased, then Form Width and its Fields Width should get reduced but only upto a limit.

4. If the Window Width is reduced beyond a limit, then there should appear a scrollbar at the Form.

We tried at this by giving flex to fields and minWidth to the Form, assuming that flex will take care of increase of width and minWidth to form would lead to a scroll if the window width is reduced further.

But this unfortunately is not working as per the following test case:
	
	<html>
		<head>
			<title>TEST</title>
			<link rel='stylesheet' href='resources/extjs/resources/css/ext-all.css' />
			<script type='text/javascript' src='resources/extjs/ext-all-dev.js'></script>
			<script type='text/javascript'>
				function getForm(){
					var form	=	{
						xtype:'form',
						region:'north',
						height:100,
						autoScroll:true,
						minWidth:300,
						title: 'Simple Form',
						items: [
						{
							xtype:'container',
							layout:'hbox',
							items:[
								{
									xtype:'textfield',
									fieldLabel: 'First',
									name: 'first',
									allowBlank: false,
									width:100,
									labelWidth:50,
									flex:1
								},{
									xtype:'textfield',
									fieldLabel: 'Last',
									name: 'last',
									allowBlank: false,
									width:100,
									labelWidth:50,
									flex:1
								}
							]
						}]
					};
					return form;
				}
				function getWin(){
					var win	=	Ext.create('Ext.window.Window',{
						title:'Test Window',
						height:400,
						width:600,
						layout:'border',
						items:[
							getForm(),
							{
								region:'center',
								title:'Center Region',
								html:'Center Region Content'
							}
						]
					});
					return win;
				}
				Ext.onReady(function(){
					var win	=	getWin();
					win.show();
				});
			
			</script>
		</head>
		<body>
		</body>
	</html>

Any suggestions on how to achieve this one? Or what is being done wrong here.

Thanks for any help.