Panel

Override defaults with $.fn.panel.defaults.

Usage Example

Create Panel

1. Create Panel via markup

Creation from markup is even easier. Add 'easyui-panel' class to <div/> markup.

2. Create Panel programatically

Let's create panel with tools on top right.


Move Panel

Call 'move' method to move panel to a new position


Load Content

Let's load the panel content via ajax and show some message when loaded successfully.

 

Properties

Name Type Description Default
title string The title text to display in panel header. null
iconCls string A CSS class to display a 16x16 icon in panel. null
width number Set the panel width. auto
height number Set the panel height. auto
left number Set the panel left position. null
top number Set the panel top position. null
cls string Add a CSS class to the panel. null
headerCls string Add a CSS class to the panel header. null
bodyCls string Add a CSS class to the panel body. null
style object Add a custom specification style to the panel. {}
fit boolean When true to set the panel size fit it's parent container. false
border boolean Defines if to show panel border. true
doSize boolean If set to true,the panel will be resize and do layout when created. true
noheader boolean If set to true, the panel header will not be created. false
content string The panel body content. null
collapsible boolean Defines if to show collapsible button. false
minimizable boolean Defines if to show minimizable button. false
maximizable boolean Defines if to show maximizable button. false
closable boolean Defines if to show closable button. false
tools array,selector Custom tools, possible values:
1) an array, each element contains iconCls and handler properties.
2) a selector that indicating the tools
 []
collapsed boolean Defines if the panel is collapsed at initialization. false
minimized boolean Defines if the panel is minimized at initialization. false
maximized boolean Defines if the panel is maximized at initialization. false
closed boolean Defines if the panel is closed at initialization. false
href string A URL to load remote data and then display in the panel. null
cache boolean True to cache the panel content that loaded from href. true
loadingMessage string When loading remote data show a message in the panel. Loading…
extractor function Defines how to extract the content from ajax response, return extracted data. 
extractor: function(data){
	var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
	var matches = pattern.exec(data);
	if (matches){
		return matches[1];	// only extract body content
	} else {
		return data;
	}
}

Events

Name Parameters Description
onLoad none Fires when remote data is loaded.
onBeforeOpen none Fires before panel is opened, return false to stop the open.
onOpen none Fires after panel is opened.
onBeforeClose none Fires before panel is closed, return false to cancel the close.
onClose none Fires after panel is closed.
onBeforeDestroy none Fires before panel is destroyed, return false to cancel the destroy.
onDestroy none Fires after panel is destroyed.
onBeforeCollapse none Fires before panel is collapsed, return false to stop the collapse.
onCollapse none Fires after panel is collpased.
onBeforeExpand none Fires before panel is expanded, return false to stop the expand.
onExpand none Fires after panel is expanded.
onResize width, height Fires after panel is resized.
width: the new outer width
height: the new outer height
onMove left,top Fires after panel is moved.
left: the new left postion
top: the new top position
onMaximize none Fires after the window has been maximized.
onRestore none Fires after the window has been restored to its original size.
onMinimize none Fires after the window has been minimized.

Methods

Name Parameter Description
options none Return options property.
panel none Return the panel object.
header none Return the panel header object.
body none Return the panel body object.
setTitle title Set the title text of header.
open forceOpen When forceOpen parameter set to true, the panel is opened bypass the onBeforeOpen callback.
close forceClose When forceClose parameter set to true, the panel is closed bypass the onBeforeClose callback.
destroy forceDestroy When forceDestroy parameter set to true, the panel is destroyed bypass the onBeforeDestroy callback.
refresh href Refresh the panel to load remote data when href property is setted.
resize options Set panel size and do layout. The options object contains following properties:
width: the new panel width
height: the new panel height
left: the new panel left position
top: the new panel top position
move options Move the panel to a new position. The options object contains following properties:
left: the new panel left position
top: the new panel top position
maximize none Fits the panel winthin its container.
minimize none Minimizing the panel.
restore none Restores the maximized panel back to its original size and position.
collapse animate Collapses the panel body.
expand animate Expand the panel body.