关于easyui的tab页不打开过就不能显示内容的问题

一直以为如果easyui的tab页如果不打开,就不会加载数据,其实只要tab的panel的页有url就会自动加载数据的,只是如果不打开过的话,tab的panel页面中的layout如果设置了fit:true,那么layout的宽高度就父容器一致,而此时tab页未打开的话,那么tab的panel的宽度就为0

其实可以这么做,开始就设定固定宽度,高度可以自动利用JS设置,例如:

主页面(父页面):

//省略主页面的其他layout组件..
<div id="zjTools" data-options="region:'east',iconCls:'',title:'',collapsible: false,split:true, border: false,minWidth: 414, maxWidth: 800,collapsed: true" htitle="显示组价工具" style="width:414px;border-left-width: 1px;">
	<div id="zjgztab" data-options="tools:'#tab-tools'">
	    <div data-options="title: '定额库', refreshable: true,iconCls:'',iniframe: true, href: 'queryEprjNormDirectory?eprjInfoId=<s:property value="id"/>'" name="dek" id="dek"></div>
	    <div data-options="title: '方案库', refreshable: true,iconCls:'',iniframe: true, href: 'queryCcsLib?eprjInfoId=<s:property value="id"/>&object.type=<s:if test="step!=0">2</s:if><s:else>0</s:else>'" name="fak"></div>
		<div data-options="title: '标准分项', refreshable: true,iconCls:'',iniframe: true, href: 'queryEprjStdList?eprjInfoId=<s:property value="id"/>'" name="bzfx"></div> 
		<s:if test="object.makeRule=='MR3'">
	    	<div data-options="title: '设备库', refreshable: true,iconCls:'',iniframe: true, href: ''" name="sbk"></div>		    
	    </s:if>
	    <div data-options="title: '分摊', refreshable: true,iconCls:'',iniframe: true, href: ''" name="ft"></div>
	    <s:if test="function[3]==1">   
	    <div data-options="title: '分项对应', refreshable: true,iconCls:'',iniframe: true, href: ''" name="bsfx"></div>
	    </s:if>
	    
	</div>
</div>

一个tab里面的panel页:

fit必须改为false,并且设置宽度,高度在JS里面设置

<div id="dekLayout" class="easyui-layout" data-options="fit: false" style="width:414px;">
   <div id="northPanel" data-options="region: 'north', border: false" style="height: 33px; border-bottom-width: 1px;">
        <div  class="easyui-toolbar" data-options="">工具栏的内容...</div>
   </div>
   <div id="dekcenLayout" data-options="region: 'center', border: false,fit: false,title: '',iconCls:''" style="border-bottom-width: 1px;overflow: auto">
        <ul id="dektree" class="__tree" data-options=""></ul>//中部防止easyui的tree
   </div>
   <div id="dekSouth" data-options="region: 'south', title: '', collapsed: false, border: false,split:true" style="height: 240px;border-top-width: 1px;">
   </div>
</div>

//在JS中动态设置layout的center和south的高度
$(function({
    var height=$(window.parent.document).find("#zjgztab").height()-30;//这个减去的高度根据实际渲染后的页面利用查看元素获取
	$('#dekLayout').css("height", height);
	var northHeight = $("#northPanel").height();
	var dektabHeight = $("#dekSouth").height();
	$("#dekSouth").parent().css("top", height-dektabHeight);
	$('#dekcenLayout').css("height", height-northHeight-dektabHeight);
}));