在使用easyui的layout布局的时候，在某种情况下，我们会在后续的逻辑中修改一下layout的某个region的高度，那么该怎么做呢？
我就遇到了这样的情况，今天需求经理提出了一个需求：认证用户可以单票查询和批量查询，而注册用户只能单票查询。
面对这个需求，我需要再判断用户的类型之后，在对region中的代码进行控制，这样在页面初始化时候，region的高度就得不到确定了，只能在Js代码中去控制。经过多方的查询，我终于找到了解决方案了。
具体代码如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>easyui layout</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> </head> <body> <h2>Auto Height for Layout</h2> <p>This example shows how to auto adjust layout height after dynamically adding items.</p> <div id="cc" style="700px;height:350px;"> <div data-option="region:'north'" style="height:150px;"> <div id="SingleQuery">……</div> <div id="MoreQuery" style="display:none;">……</div> </div> <div data-option="region:'center'" > <table id="td"></table> </div> </div> </body> <script type="text/javascript"> $(function(){ //用户类型 var userType='..'; if(userType=='认证用户'){ $("#MoreQuery").show(); //region:north 的调整高度 setHeight('220px'); } }); function setHeight(num){ var c=$("#cc"); var p=c.layout('region','north'); //get the north panel var oldHeight=p.panel('panel').outerHeight(); //获得north panel 的原高度 p.panel('resize',{height:num}); //设置north panel 新高度 var newHeight=p.panel('panel').outerHeight(); c.layout('resize',{height:c.height()+newHeight-oldHeight}); //重新设置整个布局的高度 } </script> </html>