Override defaults with $.fn.panel.defaults.
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.
Call 'move' method to move panel to a new position
Let's load the panel content via ajax and show some message when loaded successfully.
Name | Type | Description | Default |
---|---|---|---|
id | string | The id attribute of this panel. | null |
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; } } |
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. |
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. |