Panel
Widget

Panel widget is a general purpose container which may be used to contain child items or html.

A Panel may also dock a header and footer either at top/bottom or left/right:

const panel = new Panel({
  items : {
      customerName : { type : 'text', placeholder: 'Text' },
  },
  header : {
      title : 'Customer Details'
  }
});

Toolbars with buttons and other widgets

The Panel has two built-in toolbars, tbar and bbar, which are toolbars docked to the top and bottom of the panel. You can easily add any widgets to them using the code below:

const panel = new Panel({
  title : 'A Test Panel',
  items : {
    customerName : {
        type : 'text', placeholder: 'Text'
    },
  },
  bbar : {
    items : {
      proceedButton : {
        text : 'Proceed',
        onClick : () => {
          alert('Proceeding!');
        }
      }
    }
});

Panel with a form

You can use a Panel to create forms containing any Bryntum widgets. The Panel can load data into its field from a record since it subclasses the Container which has a record config.

Collapsible Panel

Panels can also be collapsible. The collapsible panel can be collapsed and expanded by clicking the icon on the far-right end of the header.

Panel as a drawer

Panels can be used as drawers which slide out from the side of the viewport, by using the drawer config:

Panel with strips

Panels can have strips docked to the top, right, bottom, or left. Strips are widgets that are docked to the panel's sides. The higher the weight assigned to a widget, the closer that widget will be to the panel body.

This is useful for adding slide-out containers to the panel. For example, a settings panel shown on the right as seen below (click the hamburger icon to show the settings panel).

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class

drawer : Boolean/Object
Make this Panel a docked drawer which slides out from one side of the browser viewport by default.

If this Panel is a child of another widget, the drawer will slide out from the side of the parent widget.

By default, it floats above the content of its host. If you want the drawer to be inline within the host, consuming content space in the host, set the drawer inline property to true.
Parameters
- side : 'start'/'left'/'end'/'right'/'top'+ 1 more'end'
  The side of the viewport to dock the drawer to.
  
  'start' means the inline-start side.
  
  'end' means the inline-end side.
- size : String/Number'30em'
  
  The size of the drawer in its collapsible axis.
- inline : Booleanfalse
  
  If using the appendTo config to place the drawer inside a host widget, this may be set to true to make the drawer inline within that host. Note that, if using this, the layout of the host element must have flex-direction set appropriately.
- autoClose : Boolean/Object
  
  Specifies what user actions should automatically close the drawer. Defaults to closing when the user clicks outside of the drawer or when focus moves outside of the drawer.
- mousedown : Boolean/String
  
  If the user clicks outside of the drawer, the drawer will automatically be hidden. If the value is a string, it is used as a CSS selector to filter clicks which should close the drawer.
- focusout : Boolean/String
  
  If focus moves outside of the drawer, the drawer will automatically be hidden.
- mouseout : String
  
  Hides the drawer when the mouse leaves the drawer after the autoCloseDelay period.
- autoCloseDelay : Number1000
  
  When using mouseout, this is the delay in milliseconds
revealed : Boolean

private

This config is used with PanelCollapserOverlay to programmatically control the visibility of the panel's body. In this mode of collapse, the body of a collapsed panel is a floating overlay. Setting this config to true will show this element, while false will hide it.
bodyCls : String/Object
Custom CSS classes to add to the panel's body element.

May be specified as a space separated string, or as an object in which property names with truthy values are used as the class names:
```
 bodyCls : {
     'b-my-class'     : 1,
     [this.extraCls]  : 1,
     [this.activeCls] : this.isActive
 }
```
ui : 'plain'/'toolbar'/String/Object
Custom CSS class name suffixes to apply to the elements rendered by this widget. This may be specified as a space separated string, an array of strings, or as an object in which property names with truthy values are used as the class names.

The panel supports a few special UIs, such as plain rendition where toolbars and header have no background/borders, and toolbar.

For example, consider a Panel with a ui config like so:
```
 new Panel({
     text : 'OK',
     ui   : 'light'
 });
```
This will apply the CSS class 'b-panel-ui-light' to the main element of the panel as well as its many child elements. This allows simpler CSS selectors to match the child elements of this particular panel UI:
```
 .b-panel-content.b-panel-ui-light {
     background-color : #eee;
 }
```
Using the cls config would make matching the content element more complex, and in the presence of docked items and nested panels, impossible to target accurately.

bbar : (WidgetConfig|String)[]/ToolbarConfig/null

A Config object representing the configuration of a Toolbar, or array of config objects representing the child items of a Toolbar. Another way to add a bbar is to use strips.

// Text only
bbar : [`Total number of students: ${totalStds}`, '->', `Passed Students: ${passedStds}`],

// Buttons
bbar : [
   {
      type     : 'button',
      ref      : 'addButton',
      text     : 'Add column',
      icon     : 'fa fa-plus',
      tooltip  : 'Add new column',
      onAction : ({ source }) => addColumn(source.element) // add new column
  },
  {
      type     : 'button',
      ref      : 'removeButton',
      text     : 'Remove last',
      icon     : 'fa fa-minus',
      tooltip  : 'Remove last column',
      onAction : () => grid.columns.count > 1 && grid.columns.last.remove() // remove last column
  }
]

// ToolbarConfig
bbar : {
    height : '4em',
    items  : {
        button1 : { text : 'A button', icon : 'fa fa-plus' },
        button2 : { text : 'Right button 1', icon : 'fa fa-trash', style : 'margin-inline-start:auto' },
        button3 : { icon : 'fa fa-gear' }
    }
}

This creates a toolbar docked to the bottom of the panel immediately above the footer.

Has a corresponding runtime bbar property.

footer : Object/String
Config object of a footer. May contain a dock, html and a cls property. A footer is not a widget, but rather plain HTML that follows the last element of the panel's body and strips.

The dock property may be top, right, bottom, left, start or end
- dock : 'top'/'right'/'bottom'/'left'/'start'+ 1 more
  
  Where to dock
- html : String
  
  Html to populate the footer with
- cls : String
  
  CSS class to add to the footer
header : String/Boolean/PanelHeader

A config object for the panel's header or a string in place of a title.

Configuring this as false explicitly removes the header bar, overriding any tools or title configs.
stripDefaults : Object

internal

An object containing config defaults for corresponding strips objects with a matching name.

By default, this object contains the keys 'bbar' and 'tbar' to provide default config values for the bbar and tbar configs.

This object also contains a key named '*' with default config properties to apply to all strips. This object provides the default type ('toolbar') and dock ('top'`) property for strips.

strips : Object<String, WidgetConfig>

An object containing widgets keyed by name. By default (when no type is given), strips are toolbars. If you want to pass an array, you can use the toolbar's items.

The bbar and tbar configs are shortcuts for adding toolbars to the panel's strips.

Strips are arranged based on their dock and weight configs.

For widgets using a dock of 'top', 'bottom', 'left', 'right', 'start' or 'end'(an "edge strip"), the higher the weight assigned to a widget, the closer that widget will be to the panel body.

For widgets with 'header' or 'pre-header' for dock (a "header strip"), higher weight values cause the widget to be placed closer to the panel's title.

 new Panel({
     title : 'Test',
     html  : 'Panel strip test',
     strips : {
         left : {
             dock  : 'left'
             items : {
                 go : {
                     text : 'Go'
                 }
             }
         }
     }
 });

// Pass an array to tbar
strips : {
    tbar : {
        items: {
            addButton : {
                type : 'button',
                text : 'Add column',
                icon : 'fa fa-plus',
                onAction : ({ source }) => addColumn(source.element)
            },
            // consider 'getCurrentDate()` a custom function
            today : `Today is ${getCurrentDate()}`
        }
    }
}

tbar : (WidgetConfig|String)[]/ToolbarConfig/null

A Config object representing the configuration of a Toolbar, or array of config objects representing the child items of a Toolbar. This creates a toolbar docked to the top of the panel immediately below the header.

To add toolbars not docked to the top, see bbar and strips.

// Text only
tbar : ['Project Timeline Overview', '->', 'Key Milestones & Deadlines'],

// Buttons
tbar : [
   {
      type     : 'button',
      ref      : 'addButton',
      text     : 'Add column',
      icon     : 'fa fa-plus',
      tooltip  : 'Add new column',
      onAction : ({ source }) => addColumn(source.element) // add new column
  },
  {
      type     : 'button',
      ref      : 'removeButton',
      text     : 'Remove last',
      icon     : 'fa fa-minus',
      tooltip  : 'Remove last column',
      onAction : () => grid.columns.count > 1 && grid.columns.last.remove() // remove last column
  }
]

// ToolbarConfig
tbar : {
    height : '4em',
    items  : {
        button1 : { text : 'A button', icon : 'fa fa-plus' },
        button2 : { text : 'Right button 1', icon : 'fa fa-trash', style : 'margin-inline-start:auto' },
        button3 : { icon : 'fa fa-gear' }
    }
}

Has a corresponding runtime tbar property.

tools : Object<String, ToolConfig>/null
The tools to add either before or after the title in the Panel header. Each property name is the reference by which an instantiated tool may be retrieved from the live tools property.
```
new Panel({
    ...
    tools : {
        add : {
            cls : 'fa fa-plus',
            handler() {
                // Clicked the tool
            }
        }
    }
});
```
Has a corresponding runtime tools property.
trapFocus : Booleanfalse

By default, tabbing within a Panel is not contained, ie you can TAB out of the Panel forwards or backwards. Configure this as true to disallow tabbing out of the Panel, and make tabbing circular within this Panel.
collapsed : Boolean

Controls whether the panel is collapsed (the body of the panel is hidden while only the header is visible). Only valid if the panel is collapsible.

Has a corresponding runtime collapsed property.
collapsible : Boolean/PanelCollapserConfig/PanelCollapserOverlayConfig
This config enables collapsibility for the panel. See collapsed.

For example:
```
     {
         type        : 'panel',
         collapsible : true
     }
```
This is managed by an instance of PanelCollapser which can be configured if an object is passed for this config property:
```
     {
         type        : 'panel',
         collapsible : {
             direction : 'left'
         }
     }
```
The config object form can contain a type property to specify the type of collapse the panel will use. This property can be one of the following:
- 'inline' (see PanelCollapser)
- 'overlay' (see PanelCollapserOverlay)
The default direction property is inferred from the position of the Panel in a flexbox layout.

If the Panel is the last child of a flexbox container, the direction is 'right' for a horizontal flexbox layout and 'down' for a vertical layout.

All other Panels in a flexbox container have the direction set to 'left' for a horizontal layout and 'up' for a vertical layout.
icon : String/DomConfig

An icon to show before the title. Either pass a CSS class as a string, or pass a DomConfig object describing an element to represent the icon.
title : String

A title to display in the header or owning TabPanel. Causes creation and docking of a header to the top if no header is configured.

If a header has been disabled by configuring the headeras false, setting it will have no effect.
The title is not HTML-encoded

The title is not HTML-encoded

Has a corresponding runtime title property.

Properties

Properties are getters/setters or publicly accessible variables on this class

isPanel : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of Panel class, or subclass thereof.

tools : Object<String, Tool | ToolConfig>/null
The tool Widgets as specified by the tools configuration (and the closable configuration in the Popup subclass). Each is a Widget instance which may be hidden, shown and observed and styled just like any other widget.
```
panel.tools.add = {
    cls : 'fa fa-plus',
    handler() {
        // Clicked the tool
    }
}
```
Has a corresponding tools config.
isPanel : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of Panel class, or subclass thereof.
bbar : Toolbar

READONLY

Get toolbar Toolbar docked to the bottom of the panel

Has a corresponding bbar config.
tbar : Toolbar

READONLY

Get toolbar Toolbar docked to the top of the panel

Has a corresponding tbar config.
collapsed : Boolean

Controls whether the panel is collapsed (the body of the panel is hidden while only the header is visible). Only valid if the panel is collapsible.

Has a corresponding collapsed config.
collapsing : Boolean

READONLY

This property is true if the panel is currently collapsing.
collapsingExpanding : Boolean

internal

READONLY

This property is true if the panel is currently either collapsing or expanding.
expanding : Boolean

READONLY

This property is true if the panel is currently expanding.
title : String

A title to display in the header or owning TabPanel. Causes creation and docking of a header to the top if no header is configured.

If a header has been disabled by configuring the headeras false, setting it will have no effect.
The title is not HTML-encoded

The title is not HTML-encoded

Has a corresponding title config.

Functions

Functions are methods available for calling on the class

collapsePanel( )
: Promise

ASYNC

Collapse the panel.
expandPanel( )
: Promise

ASYNC

Expand the panel.
toggleCollapsed( collapse )
: Boolean

Toggles collapsed state of the panel.

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

collapse

Fires when a Panel is collapsed using the collapsible setting.
expand

Fires when a Panel is expanded using the collapsible setting.
toolClick

A header tool has been clicked.

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onCollapse

Called when a Panel is collapsed using the collapsible setting.
onExpand

Called when a Panel is expanded using the collapsible setting.
onToolClick

A header tool has been clicked.

Type definitions

PanelHeader
An object that describes a Panel's header.
Properties
- cls : String/Object
  
  Additional CSS class or classes to add to the header element.
- dock : 'top'/'right'/'bottom'/'left'"top"
  
  Specify "left", "bottom", or "right" to control panel edge to which the header docks.
- title : String
  
  The panel title or raw HTML (not automatically HTML-encoded).
- iconCls : String
  
  A CSS class representing an icon to display in the header
- titleAlign : 'start'/'center'/'end'"start"
  
  Specify "center" or "end" to align the panel's title differently.
- style : Object<String, String | Number>/String
  
  A style string or object to apply to the header

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-default-panel-transition	The default set of transitions which applies to the panel's encapulating element Subclasses may add their own using this variable followed by their own transitions.
--b-panel-background	Panel background-color
--b-panel-border	Panel border
--b-panel-bottom-toolbar-background	Bottom toolbar background
--b-panel-bottom-toolbar-padding	Bottom toolbar padding
--b-panel-drawer-box-shadow	Box-shadow for drawer panels
--b-panel-gap	Gap between items in the panel
--b-panel-header-background	Header background
--b-panel-header-border-bottom	Header bottom border
--b-panel-header-color	Header color
--b-panel-header-font-size	Header font-size
--b-panel-header-font-weight	Header font-weight
--b-panel-header-gap	Gap between the header's different parts
--b-panel-header-padding	Header padding
--b-panel-header-text-align	Header text-align
--b-panel-overlay-border	Panel border when overlaid
--b-panel-overlay-box-shadow	Box-shadow for overlaid panel
--b-panel-padding	Panel padding
--b-panel-top-toolbar-border-radius	Top toolbar border-radius (only applies when there is a header)
--b-panel-top-toolbar-margin-inline	Top toolbar margin-inline (only applies when there is no header)
--b-panel-with-header-padding	Panel padding when there is a header

Panel
Widget

Toolbars with buttons and other widgets

Panel with a form

Collapsible Panel

Panel as a drawer

Panel with strips

Configs

Parameters

Properties

Functions

Events

Event handlers

Type definitions

Properties

CSS variables

Source path

Inheritance tree4

Mixins7

Contents

Panel Widget

Toolbars with buttons and other widgets

Panel with a form

Collapsible Panel

Panel as a drawer

Panel with strips

Configs

Parameters

Properties

Functions

Events

Event handlers

Type definitions

Properties

CSS variables

Source path

Inheritance tree4

Mixins7

Contents

Panel
Widget