Dialog with layouts not resizing

[WizPS]

I have the following code for creating a re-sizable dialog box in js. However resize makes the layout panels not following the dialogue box. I tried to add fit:true but it does not help.
Please advice.

Code:

function my_dialog() {
	using(['dialog'], function () {
		var $myDialog = $("<div/>", { id: 'dlg' });
		$myDialog.dialog({ width: 400, height: 200, resizable: true });
		$myDialog.layout();
		$myDialog.layout('add', { region: 'center', content: 'center'});
		$myDialog.layout('add', { region: 'west', content: 'west', width: 200, split: true });
	});
}

[jahangir]

Add following code at the end of your function "my_dialog()"

Code:

$myDialog.dialog({
	onResize:function(w, h){						
		$myDialog.layout('panel', 'center').panel('resize',{height:h, width: w - 200});
		$myDialog.layout('panel', 'west').panel('resize',{height:h});					
	}
});	

Please check this example.

http://code.reloado.com/jbhatti/17/edit#html,live

[WizPS]

Thank you jahangir. In the following example there is no extra code for resizing and still it works:
https://www.jeasyui.com/demo/main/index.php?plugin=Window&theme=material-teal&dir=ltr&pitem=&sort=asc
(clicking 'Window Layout' example)

Do you believe is it possible get the same behavior using js, so I don't need the extra function for resizing?

[jahangir]

Please check this.

http://code.reloado.com/jbhatti/20/edit#html,live

[WizPS]

Wonderful jahangir, this really is a nice solution and it helps a lot. Thank you very much!