Print Page - How to add tool buttons on expandPanel in layout?

Title: How to add tool buttons on expandPanel in layout?
Post by: SeanHan on October 16, 2014, 12:13:51 AM

anyone help?

Title: Re: How to add tool buttons on expandPanel in layout?
Post by: SeanHan on October 20, 2014, 06:15:41 PM

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

Title: Re: How to add tool buttons on expandPanel in layout?
Post by: stworthy on October 20, 2014, 08:44:38 PM

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>

Title: Re: How to add tool buttons on expandPanel in layout?
Post by: SeanHan on October 20, 2014, 11:23:43 PM

Quote from: stworthy on October 20, 2014, 08:44:38 PM

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.

Title: Re: How to add tool buttons on expandPanel in layout?
Post by: stworthy on October 21, 2014, 12:19:20 AM

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>

Title: Re: How to add tool buttons on expandPanel in layout?
Post by: SeanHan on October 21, 2014, 06:36:42 PM

Quote from: stworthy on October 21, 2014, 12:19:20 AM

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!

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: SeanHan on October 16, 2014, 12:13:51 AM