How to add tool buttons on expandPanel in layout?

[SeanHan]

anyone help?

[SeanHan]

Dose this feature not supported in current version? Or any other ways to get it?

[stworthy]

Any region panels accept the 'tools' property that allows you to add icons to the panel header.

Code:

	<div class="easyui-layout" style="width:700px;height:350px;">
		<div title="West" style="width:100px;" data-options="
				region:'west',
				split:true,
				tools:[{
					iconCls:'icon-add'
				}]"></div>
		<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
		</div>
	</div>

[SeanHan]

Any region panels accept the 'tools' property that allows you to add icons to the panel header.

Code:

	<div class="easyui-layout" style="width:700px;height:350px;">
		<div title="West" style="width:100px;" data-options="
				region:'west',
				split:true,
				tools:[{
					iconCls:'icon-add'
				}]"></div>
		<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
		</div>
	</div>

Thanks for your reply, but your code only shows how to add icons on normal panel. I just don't know how to add these icons on expand panel when a panel hidden.

[stworthy]

In the 'onCollapse' event, get the expanding panel and override the 'tools' property. Please refer the code below:

Code:

	<div class="easyui-layout" style="width:700px;height:350px;">
		<div title="North" style="height:100px" data-options="
				region:'north',
				split:true,
				onCollapse:onCollapse
				"></div>
		<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
		</div>
	</div>
	<script type="text/javascript">
		function onCollapse(){
			var opts = $(this).panel('options');
			var layout = $(this).closest('.layout');
			var region = opts.region;
			var p = layout.layout('panel', 'expand'+region.substr(0,1).toUpperCase()+region.substr(1));
			var tools = p.panel('options').tools;
			p.panel({
				tools: [{
					iconCls:'icon-add'
				}].concat(tools.pop())
			})
		}
	</script>

[SeanHan]

In the 'onCollapse' event, get the expanding panel and override the 'tools' property. Please refer the code below:

Code:

	<div class="easyui-layout" style="width:700px;height:350px;">
		<div title="North" style="height:100px" data-options="
				region:'north',
				split:true,
				onCollapse:onCollapse
				"></div>
		<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
		</div>
	</div>
	<script type="text/javascript">
		function onCollapse(){
			var opts = $(this).panel('options');
			var layout = $(this).closest('.layout');
			var region = opts.region;
			var p = layout.layout('panel', 'expand'+region.substr(0,1).toUpperCase()+region.substr(1));
			var tools = p.panel('options').tools;
			p.panel({
				tools: [{
					iconCls:'icon-add'
				}].concat(tools.pop())
			})
		}
	</script>

Thank you very much!