Using Layout to re-arrange page content on browser resize

[morib]

My requirement is to use multiple datagrids on a single page and the maximum space of the browser should be used.  To test potential solutions, I created a fiddle project ( http://jsfiddle.net/A54pt/ ) that contains:

<div style="width:100%;height:350px;">
    <div class="easyui-layout" style="fit:true;width:100%;height:350px;">
        <div data-options="region:'west',split:false, collapsible:false" title="West" style="width:44%"></div>
        <div data-options="region:'center',title:'Main Title'" style="width:55%">
        </div>
    </div>
 </div>

In this simple test, a Layout with 2 panels is used.  The left panel should use about 40% of the screen width while the one on the right should use about 55% of the width.  As you can see, it does not work when you resize the browser and the left panel does not use 40% of the width...   What am I doing wrong ?

Thanks for your assistance.

[stworthy]

Please try this updated example http://jsfiddle.net/A54pt/1/

[morib]

Very good and thank you !  Now for the next step where I want my datagrid contained within each panel to follow the resizing.  Is the best method to invoke the datagrid resize method after the panel resize method?  For example

$('#theNameOfMyDatagrid').datagrid('resize',{width: theWidthOfTheParentPanel});

Regards.

[stworthy]

Many layout examples are available from here http://www.jeasyui.com/demo/main/index.php?plugin=Layout&theme=default&dir=ltr&pitem=. They show you how to place components in a layout panel.