Jx.Panel

Extends: Object

Implements: Options, Events, Jx.ContentLoader

A panel is a fundamental container object that has a content area and optional toolbars around the content area. It also has a title bar area that contains an optional label and some user controls as determined by the options passed to the constructor.

Example

Events

close	fired when the panel is closed
collapse	fired when the panel is collapsed
expand	fired when the panel is opened

License

This file is licensed under an MIT style license

Summary

Jx.Panel	Extends: Object
Options
id	String, an id to assign to the panel’s container
label	String, the title of the Jx Panel
height
collapse	boolean, determine if the panel can be collapsed and expanded by the user.
collapseTooltip	the tooltip to display over the collapse button
collapseLabel	the label to use for the collapse menu item
expandLabel	the label to use for the expand menu item
maximizeTooltip	the tooltip to display over the maximize button
maximizeLabel	the label to use for the maximize menu item
close	boolean, determine if the panel can be closed (hidden) by the user.
closeTooltip	the tooltip to display over the close button
closeLabel	the label to use for the close menu item
closed	boolean, initial state of the panel (true to start the panel closed), default is false
hideTitle	Boolean, hide the title bar if true.
toolbars	array of Jx.Toolbar objects to put in the panel.
Constructor
Jx.Panel	Initialize a new Jx.Panel instance
Options
<Jx.Panel.Options>, <Jx.ContentLoader.Options>
Functions
layoutContent	the sizeChange event of the Jx.Layout that manages the outer container is intercepted and passed through this method to handle resizing of the panel contents because we need to do some calculations if the panel is collapsed and if there are toolbars to put around the content area.
setLabel	Set the label in the title bar of this panel
getLabel	Get the label of the title bar of this panel
finalize	Clean up the panel
maximize	Maximize this panel
setContent	set the content of this panel to some HTML
setContentURL	Set the content of this panel to come from some URL.
panelContentLoaded	When the content of the panel is loaded from a remote URL, this method is called when the ajax request returns.
setBusy	Set the panel as busy or not busy, which displays a loading image in the title bar.
toggleCollapse	sets or toggles the collapsed state of the panel.
close	Closes the panel (completely hiding it).

Options

id

String, an id to assign to the panel’s container

label

String, the title of the Jx Panel

height

integer, fixed height to give the panel

no fixed height by default.

collapse

boolean, determine if the panel can be collapsed and expanded by the user. This puts a control into the title bar for the user to control the state of the panel.

collapseTooltip

the tooltip to display over the collapse button

collapseLabel

the label to use for the collapse menu item

expandLabel

the label to use for the expand menu item

maximizeTooltip

the tooltip to display over the maximize button

maximizeLabel

the label to use for the maximize menu item

close

boolean, determine if the panel can be closed (hidden) by the user. The application needs to provide a way to re-open the panel after it is closed. The closeable property extends to dialogs created by floating panels. This option puts a control in the title bar of the panel.

closeTooltip

the tooltip to display over the close button

closeLabel

the label to use for the close menu item

closed

boolean, initial state of the panel (true to start the panel closed), default is false

hideTitle

Boolean, hide the title bar if true. False by default.

toolbars

array of Jx.Toolbar objects to put in the panel. The position of each toolbar is used to position the toolbar within the panel.

Constructor

Jx.Panel

Initialize a new Jx.Panel instance

Options

<Jx.Panel.Options>, <Jx.ContentLoader.Options>

Functions

layoutContent

layoutContent: function()

the sizeChange event of the Jx.Layout that manages the outer container is intercepted and passed through this method to handle resizing of the panel contents because we need to do some calculations if the panel is collapsed and if there are toolbars to put around the content area.

setLabel

setLabel: function( s )

Set the label in the title bar of this panel

Parameters

s	{String} the new label

getLabel

getLabel: function()

Get the label of the title bar of this panel

Returns

{String} the label

finalize

finalize: function()

Clean up the panel

maximize

maximize: function()

Maximize this panel

setContent

setContent : function ( html )

set the content of this panel to some HTML

Parameters

html	{String} the new HTML to go in the panel

setContentURL

setContentURL : function ( url )

Set the content of this panel to come from some URL.

Parameters

url	{String} URL to some HTML content for this panel

panelContentLoaded

panelContentLoaded: function( html )

When the content of the panel is loaded from a remote URL, this method is called when the ajax request returns.

Parameters

html	{String} the html return from xhr.onSuccess

setBusy

setBusy : function( isBusy )

Set the panel as busy or not busy, which displays a loading image in the title bar.

Parameters

isBusy

{Boolean} the busy state

toggleCollapse

toggleCollapse: function( state )

sets or toggles the collapsed state of the panel. If a new state is passed, it is used, otherwise the current state is toggled.

Parameters

state

optional, if passed then the state is used, otherwise the state is toggled.

close

close: function()

Closes the panel (completely hiding it).