easyui布局

如图所示，页面是上左中下的布局，左边是一颗目录树，中间用来显示iframe页面，这样的布局是很常见的。

截图中的iframe是一个设备详情页，包括设备的基本信息、设备记录和配件列表等信息，我们在上部显示基本信息，下面用一个tab显示多个datagrid。最简单的实现是将这个iframe页也用layout，但是这样存在一个问题，上部的height需要定死，可能导致信息展示不全。

我们可以在tab外面包一个panel，id为 center，然后定义一个resize方法

function resize(){
$("#center").panel("resize",function(){
width: $(window).width()
height: $(widow).height()-$("#info").height()
})
}

在页面加载完和页面resize的时候调用resize方法即可

测试时，会发现datagrid底部和右边会出现一些空白，这是出现了滚动条导致的，在body加上overflow：hidden就OK了