ConfirmationBar

This widget is a Toolbar with default buttons for items common to system dialogs. Button order is appropriate for the platform. For example, on Windows, OK/Cancel buttons are presented in that order, while on Mac OS X and many flavors of Linux, these buttons are presented in Cancel/OK order.

Confirmation bar
//<code-header>
fiddle.title = 'Confirmation bar';
//</code-header>
new Panel({
    appendTo : targetElement,
    title    : 'Confirmation Bar',
    style    : {
        boxShadow    : 'var(--b-elevation-1)',
        borderRadius : 'var(--b-widget-border-radius-large)'
    },
    bbar : {
        type : 'confirmationbar'
    }
});

Configs

98

Common

listenersEvents

Other

defaultButton: cancel | ok | no | yes= okAlso a property

The name of the default button. Must match with the defaults in namedItems.

items: String | Object<String, (ContainerItemConfig|MenuItemEntry)> | (ContainerItemConfig|MenuItemEntry|Widget)[]= ok,cancel

In addition to normal form of items, this class supports a comma-delimited string.

For example:

 items : 'ok,cancel',
 // or
 items : 'yes,no',

These are equivalent to:

 items : {
     ok     : true,
     cancel : true
 },
 // or
 items : {
     yes : true,
     no  : true
 },

Both forms use the pre-defined buttons: 'cancel', 'ok', 'no', 'yes'.

keyMap: Object<String, KeyMapConfig>= {"Enter":"doDefault","NumpadEnter":"doDefault","Escape":"doCancel"}

Maps Enter and Escape to doDefault and doCancel, respectively.

namedItems: Object<string, ContainerItemConfig>= {"yes":"","no":"","ok":"","cancel":""}

The default buttons available for use in the items config.

Set to false to disable synchronizing button widths. By default, buttons are assigned a minWidth based on the longest text. The default OK and Cancel buttons (in the en-US locale) will be assigned minWidth = '6em'.

columnWidget
defaultFocusContainer
overflowToolbar
renditionContainer
rtlRTL
spanWidget

Accessibility

ariaLabelWidget

Content

defaultsContainer
lazyItemsContainer
textContentContainer
toolsToolable

CSS

borderContainer
clsWidget
colorWidget
htmlClsWidget
itemClsContainer
styleWidget
uiWidget
widgetClsToolbar

DOM

adoptWidget
appendToWidget
contentWidget
datasetWidget
htmlWidget
idWidget
tagWidget
titleWidget

Float & align

alignWidget
anchorWidget
centeredWidget
draggableWidget
floatingWidget
xWidget
yWidget

Layout

alignSelfWidget
dockWidget
flexWidget
heightWidget
hiddenWidget
hideWhenEmptyContainer
layoutContainer
layoutStyleContainer
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
textAlignWidget
weightWidget
widthWidget

misc

tabBarItemsContainer

Misc

dataFieldWidget
disabledWidget
localeClassLocalizable
localizableLocalizable
maskedWidget
ownerWidget
readOnlyWidget
refWidget
rippleWidget
tabWidget
tooltipWidget

Record

recordContainer

Scrolling

Properties

92

Class hierarchy

isConfirmationBar: Boolean= truereadonly
Identifies an object as an instance of ConfirmationBar class, or subclass thereof.
isConfirmationBar: Boolean= truereadonlystatic
Identifies an object as an instance of ConfirmationBar class, or subclass thereof.
isContainerContainer
isDelayableDelayable
isEventsEvents
isKeyMapKeyMap
isLocalizableLocalizable
isToolableToolable
isToolbarToolbar
isWidgetWidget

Other

Returns the cancel button if present in the items config or null if not present.

defaultButton: cancel | ok | no | yes= okAlso a config

The name of the default button. Must match with the defaults in namedItems.

noButton: Buttonreadonly

Returns the no button if present in the items config or null if not present.

okButton: Buttonreadonly

Returns the ok button if present in the items config or null if not present.

Set to false to disable synchronizing button widths. By default, buttons are assigned a minWidth based on the longest text. The default OK and Cancel buttons (in the en-US locale) will be assigned minWidth = '6em'.

yesButton: Buttonreadonly

Returns the yes button if present in the items config or null if not present.

$namestaticWidget
columnWidget
firstItemContainer
hasChangesContainer
isValidContainer
itemsContainer
lastItemContainer
renditionContainer
rtlRTL
spanWidget
typestaticWidget
valuesContainer

Accessibility

keyMapKeyMap

Content

toolsToolable

CSS

clsWidget

DOM

appendToWidget
contentWidget
datasetWidget
elementWidget
htmlWidget
idWidget
styleWidget

Float & align

xWidget
yWidget

Layout

alignSelfWidget
flexWidget
heightWidget
layoutContainer
layoutStyleContainer
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
widthWidget

Lifecycle

configBase

Misc

cellInfoWidget
disabledWidget
localeHelperLocalizable
localeManagerLocalizable
readOnlyWidget
refWidget
tabWidget
tooltipWidget

Record

recordContainer

Visibility

hiddenWidget
isVisibleWidget

Widget hierarchy

ownerWidget
parentWidget
widgetMapContainer

Functions

67

Configuration

applyDefaultsstaticBase

Events

Float & align

alignToWidget
setXYWidget
showByWidget
toFrontWidget

Lifecycle

createstaticWidget
destroystaticBase
initClassstaticWidget

Misc

attachTooltipstaticWidget
fromElementstaticWidget
fromSelectorstaticWidget
getByIdstaticWidget
isOfTypeNamestaticBase
mixinstaticBase
optionalLstaticLocalizable

Other

addContainer
composeWidget
createOnFrameDelayable
disableWidget
enableWidget
focusWidget
getAtContainer
getWidgetByIdContainer
insertContainer
LstaticLocalizable
maskWidget
onEvents
recomposeWidget
relayAllEvents
removeContainer
removeAllContainer
resetValuesContainer
setValuesContainer
triggerEvents
unEvents
unmaskWidget

Visibility

hideWidget
showWidget

Widget hierarchy

closestWidget
containsWidget
ownsWidget
queryWidget
queryAllWidget
upWidget

Events

20

This event is fired when the user clicks one of the buttons.

// Adding a listener using the "on" method
confirmationBar.on('choice', ({ choice, relatedEvent, source, userAction }) => {

});
ParameterTypeDescription
choiceConfirmationBarChoice

The description of the chosen button.

relatedEventEvent

The DOM event.

sourceConfirmationBar

The ConfirmationBar instance.

userActionBoolean

true since the user clicked the button.

catchAllEvents
destroyEvents
focusInWidget
focusOutWidget
hideWidget
itemDropToolbar
paintWidget
readOnlyWidget
recomposeWidget
resizeWidget
showWidget

Event handlers

20

This event is called when the user clicks one of the buttons.

new ConfirmationBar({
    onChoice({ choice, relatedEvent, source, userAction }) {

    }
});
ParameterTypeDescription
choiceConfirmationBarChoice

The description of the chosen button.

relatedEventEvent

The DOM event.

sourceConfirmationBar

The ConfirmationBar instance.

userActionBoolean

true since the user clicked the button.

onDestroyEvents
onFocusInWidget
onHideWidget
onItemDropToolbar
onPaintWidget
onResizeWidget
onShowWidget

Typedefs

8

A description of the chosen button in a ConfirmationBar.

ParameterTypeDescription
nameok | cancel | no | yes

The name of the chosen button.

approveBoolean

Set to true when name is either 'ok' or 'yes'.

okBoolean

Set to true when name is 'ok'.

cancelBoolean

Set to true when name is 'cancel'.

noBoolean

Set to true when name is 'no'.

yesBoolean

Set to true when name is 'yes'.

AlignSpecWidget
ColorWidget

CSS variables

37