Print Page - Toolbar in Panel or Tree

Does panel or tree support toolbar like data grid toolbar? atm i copy paste html code from jeasyui generated data grid toolbar (table) to mimic this feature.

Code:

<div class="datagrid-toolbar"><table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="javascript:void(0)" class="l-btn l-btn-plain" group="" id=""><span class="l-btn-left"><span class="l-btn-text icon-add l-btn-icon-left">Add</span></span></a></td><td><a href="javascript:void(0)" class="l-btn l-btn-plain" group="" id=""><span class="l-btn-left"><span class="l-btn-text icon-cut l-btn-icon-left">Cut</span></span></a></td><td><div class="datagrid-btn-separator"></div></td><td><a href="javascript:void(0)" class="l-btn l-btn-plain" group="" id=""><span class="l-btn-left"><span class="l-btn-text icon-save l-btn-icon-left">Save</span></span></a></td></tr></tbody></table></div>

The panel and tree have not 'toolbar' property, but the user can get more flexible layout by applying 'layout' component to it. The code below shows how to add a toolbar to panel.

Code:

<div class="easyui-panel" title="Basic Panel" style="width:500px;height:200px;">
	<div class="easyui-layout" fit="true">
		<div region="north" border="false" style="padding:3px 5px;background:#efefef;">
			<a href="#" class="easyui-linkbutton">Open</a>
			<a href="#" class="easyui-linkbutton">Close</a>
		</div>
		<div region="center" border="false" style="padding:20px">
			panel content.
		</div>
	</div>
</div>

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: arma on October 06, 2013, 04:28:52 PM