tabs in layout

[mzeddd]

I have layout with "North", "Center", "South" and "East" panels
"Center" panel does not have "title". Instead I'm defining extra panel like this:

Code:

<div class="easyui-panel" title="Reports" border="false" fit="true" style="padding:1px;">
	<form id="myForm">
		<table>
			<tr>
				<td><a href="javascript:void(0)" class="easyui-linkbutton" >Show</a></td>
				<td><a href="javascript:void(0)" class="easyui-linkbutton" >Export</a></td>
			</tr>
		</table>
	</form>
	<div id="myTabs" class="easyui-tabs" fit="true" plain="true">
		<div title="tab1" style="padding:10px"></div>
		<div title="tab2" style="padding:10px"></div>
	</div>
</div>

But when I load something big into "tab1" or "tab2" to let scroll bars appear I could not see bottom lines of loaded content.

This happens possible because the height of tabs panel is calculated in accourdance with height of parent panel without taking into account height of "myForm".
So, this shifts tabs down.

Is it possible to fix that without fixed height definition?

[stworthy]

Try using nested layout.

Code:

<div class="easyui-panel" title="Reports" border="false" fit="true" style="padding:1px;">
	<div class="easyui-layout" fit="true">
		<div region="north">
			<form id="myForm">
				<table>
					<tr>
						<td><a href="javascript:void(0)" class="easyui-linkbutton" >Show</a></td>
						<td><a href="javascript:void(0)" class="easyui-linkbutton" >Export</a></td>
					</tr>
				</table>
			</form>
		</div>
		<div region="center">
			<div id="myTabs" class="easyui-tabs" fit="true" plain="true">
				<div title="tab1" style="padding:10px"></div>
				<div title="tab2" style="padding:10px"></div>
			</div>
		</div>
	</div>
</div>

[mzeddd]

Thanks! I'll do this way.

BTW, Is it possible to add possibility in next versions of EasyUI to have "tools" panel like in DataGrid for example?

[stworthy]

Here is another solution that is not using layout.

Code:

	<div class="easyui-panel" style="width:700px;height:350px;padding:1px" data-options="
				onResize:function(){
					$(this).find('div.cc')._outerWidth($(this).width())
							._outerHeight($(this).height()-50)
							.children('div').triggerHandler('_resize');
				}
			">
		<div style="height:50px">
			<form id="myForm">
				<table>
					<tr>
						<td><a href="javascript:void(0)" class="easyui-linkbutton" >Show</a></td>
						<td><a href="javascript:void(0)" class="easyui-linkbutton" >Export</a></td>
					</tr>
				</table>
			</form>
		</div>
		<div class="cc">
			<div id="myTabs" class="easyui-tabs" fit="true" plain="true">
				<div title="tab1" style="padding:10px"></div>
				<div title="tab2" style="padding:10px"></div>
			</div>
		</div>
	</div>