JQuery Easyui Layout layouts Adaptive browser size

First explain the meaning of the title, when we use the jquery Easyui layout to lay out, we may encounter such a problem, that is when the size of the browser to manually resize, or maximize, restore the window, An area of layout cannot be filled with empty space created by the browser's enlargement, which may seem awkward at this time. Of course, if your layout is placed directly on the body label, and there is no nested layout, the layout can not be self-adaptive size situation.

When the layout is more complex, it will have to layout nested up to use, this time the page can not be self-adapting to the size of the situation I can not bear, this problem troubled me for a few days, fortunately there is a universal network, the problem will always be resolved, the following would be their two days to check the information and their experience introduced to everyone, Hope to be helpful to friends who meet the same problem in the future. But there's no deep analysis here, because I'm not familiar with jquery and Easyui.

First write a nested layout, the parent is body-based, contains north,center,west,east,south five regions, the child layout is based on the parent center area, if you open the page, the browser is not maximized, Then manually resize the browser, you will find the problem, click here to see the demo.

In fact, layout inherits from the panel, and the Panel has a fit property, as long as the set to True,layout can adapt to the size of the parent element changes, so just add fit= "true" basic can solve the problem, click here to see the demonstration, relative to the situation can not be adaptive, The changed code has only the following line:
[HTML]

[/html]
This solution should be the simplest, but under the non-IE browser, you may find that the browser size is repeatedly adjusted, especially when the browser, the child's layout will appear scroll bar, womb did not find out what caused the cause. So there is a more complex solution on the web, that is, the use of jquery Resize event to monitor the browser window, when the browser is adjusted to reset some page element size, to adapt to size, as long as the parent element is set to the same width, the following is the JS code:
[JavaScript]
var settime = null;
function Redraw () {
$ (' #wrap '). Layout (' resize ');
$ (' #subWrap '). Layout (' panel ', ' North '). Panel (' resize ', {width:$ (' #subWrap '). Width ()});
$ (' #subWrap '). Layout (' panel ', ' Center '). Panel (' resize ', {width:$ (' #subWrap '). Width ()});
$ (' #subWrap '). Layout (' resize ');
}
$ (function () {
$ (window). Resize (function () {
if (settime! = null)
Cleartimeout (settime);
Settime=settimeout ("Redraw ()", 100);
});
var p1 = $ (' body '). Layout (' panel ', ' West '). Panel ({
Oncollapse:function () {
if (settime! = null)
Cleartimeout (settime);
Settime=settimeout ("Redraw ()", 100);
},
Onexpand:function () {
if (settime! = null)
Cleartimeout (settime);
Settime=settimeout ("Redraw ()", 100);
},
Onresize:function (width,height) {
if (settime! = null)
Cleartimeout (settime);
Settime=settimeout ("Redraw ()", 100);
}
});
var P2 = $ (' body '). Layout (' panel ', ' East '). Panel ({
Oncollapse:function () {
if (settime! = null)
Cleartimeout (settime);
Settime=settimeout ("Redraw ()", 100);
},
Onexpand:function () {
if (settime! = null)
Cleartimeout (settime);
Settime=settimeout ("Redraw ()", 100);
},
Onresize:function (width,height) {
if (settime! = null)
Cleartimeout (settime);
Settime=settimeout ("Redraw ()", 100);
}
});
});
[/javascript]

Of course, it's not enough to use jquery's resize for such a page, because when I expand the west and east areas of the live shrink parent layout, or pull the split resize between West and EST and center, The layout of the child will still be unable to automatically fill the situation, so for these events, all need to capture to deal with the arrangement of child layouts, which is why I above the JS code out of the Resize Event Monitoring window also listen to the other several events reason, rather troublesome. If there is a better solution, you are welcome to come forward. Finally the adjusted page demo is here

November 13, 2011 Update:

Using the properties of fit= ' true ' in child layout, you can basically keep the page adaptive, that is, after stretching the browser under non-Internet Explorer, the region containing the child layout will have scroll bars. In order to solve this scrollbar problem using jquery Resize event, in fact, do not have so much trouble, as long as the inclusion of their own layout of the region to use Overflow:hidden on it, this is a compromise and simple solution.
Demo page Look here

From http://www.loststop.com/wap/index-wap2.php?p=3725