FieldSet
The FieldSet widget wraps an <fieldset> element. A fieldset is a specially styled
Panel intended to hold form fields.
Field set
//<code-header>
fiddle.title = 'Field set';
//</code-header>
new FieldSet({
appendTo : targetElement,
title : 'The FieldSet widget',
width : '27em',
labelPosition : 'align-before',
items : {
username : {
type : 'text',
label : 'Username'
},
password : {
type : 'password',
label : 'Enter password'
},
repeat : {
type : 'password',
label : 'Repeat password'
},
register : {
type : 'button',
text : 'Register',
style : 'margin:2em 0 0 0',
onClick() {
Toast.show('You clicked the button');
}
}
}
});Configs
112
Configs
112Common
listenersEvents
Other
Setting this config to true assigns a horizontal box layout (flex-flow: row) to the items in this
container, while false assigns a vertical box layout (flex-flow: column).
By default, this value is automatically determined based on the label and labelPosition configs.
callOnFunctionsWidget
columnWidget
defaultFocusContainer
drawerPanel
inputFieldAlignContainer
labelPositionContainer
renditionContainer
rtlRTL
spanWidget
Content
bbarPanel
defaultsContainer
footerPanel
headerPanel
itemsContainer
lazyItemsContainer
namedItemsContainer
stripsPanel
tbarPanel
textContentContainer
toolsPanel
trapFocusPanel
CSS
bodyClsPanel
borderContainer
clsWidget
colorWidget
contentElementClsWidget
htmlClsWidget
itemClsContainer
styleWidget
uiPanel
DOM
adoptWidget
appendToWidget
contentWidget
datasetWidget
htmlWidget
idWidget
insertBeforeWidget
insertFirstWidget
tagWidget
Float & align
alignWidget
anchorWidget
centeredWidget
constrainToWidget
draggableWidget
floatingWidget
hideAnimationWidget
maximizeOnMobileWidget
positionedWidget
scrollActionWidget
showAnimationWidget
xWidget
yWidget
Layout
alignSelfWidget
collapsedPanel
collapsiblePanel
dockWidget
flexWidget
heightWidget
hiddenWidget
hideWhenEmptyContainer
layoutContainer
layoutStyleContainer
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
textAlignWidget
weightWidget
widthWidget
misc
tabBarItemsContainer
Misc
bubbleEventsEvents
dataFieldWidget
defaultBindPropertyWidget
disabledWidget
elementAttributesWidget
iconPanel
ignoreParentReadOnlyWidget
localeClassLocalizable
localizableLocalizable
localizablePropertiesLocalizable
maskDefaultsWidget
maskedWidget
monitorResizeWidget
ownerWidget
preventTooltipOnTouchWidget
readOnlyWidget
refWidget
rippleWidget
rootElementWidget
showTooltipWhenDisabledWidget
tabWidget
titlePanel
tooltipWidget
Scrolling
scrollableWidget
Properties
97
Properties
97Class hierarchy
Identifies an object as an instance of FieldSet class, or subclass thereof.
Identifies an object as an instance of FieldSet class, or subclass thereof.
isContainerContainer
isDelayableDelayable
isEventsEvents
isKeyMapKeyMap
isLabelableLabelable
isLocalizableLocalizable
isPanelPanel
isRTLRTL
isStateState
isToolableToolable
isWidgetWidget
Other
Setting this config to true assigns a horizontal box layout (flex-flow: row) to the items in this
container, while false assigns a vertical box layout (flex-flow: column).
By default, this value is automatically determined based on the label and labelPosition configs.
columnWidget
firstItemContainer
hasChangesContainer
inputFieldAlignContainer
isSettingValuesContainer
isStatefulState
isValidContainer
itemsContainer
labelPositionContainer
lastItemContainer
renditionContainer
rtlRTL
spanWidget
toolsPanel
valuesContainer
CSS
clsWidget
DOM
appendToWidget
contentWidget
contentElementWidget
datasetWidget
elementWidget
focusableElementWidget
focusElementWidget
htmlWidget
idWidget
insertBeforeWidget
insertFirstWidget
overflowElementWidget
styleWidget
Layout
alignSelfWidget
collapsedPanel
collapsingPanel
expandingPanel
flexWidget
heightWidget
layoutContainer
layoutStyleContainer
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
scrollableWidget
widthWidget
Misc
callOnFunctionsEvents
cellInfoWidget
disabledWidget
labelLabelable
localeHelperLocalizable
localeManagerLocalizable
readOnlyWidget
refWidget
tabWidget
titlePanel
tooltipWidget
State
stateState
Widget hierarchy
containsFocusWidget
nextSiblingWidget
ownerWidget
parentWidget
previousSiblingWidget
visibleChildCountContainer
widgetMapContainer
Functions
74
Functions
74Configuration
Events
detachListenersBase
Misc
animatePropertyBase
callbackBase
downloadTestCaseBase
resolveCallbackBase
toggleCollapsedPanel
updateLocalizationLocalizable
Other
addContainer
addListenerEvents
announceAriaLiveWidget
collapsePanelPanel
composeWidget
createOnFrameDelayable
disableWidget
enableWidget
exitFullscreenWidget
expandPanelPanel
focusWidget
getAtContainer
getWidgetByIdContainer
hasListenerEvents
insertContainer
maskWidget
onEvents
processWidgetConfigContainer
recomposeWidget
relayAllEvents
removeContainer
removeAllContainer
removeAllListenersEvents
removeListenerEvents
requestFullscreenWidget
resetValuesContainer
resumeEventsEvents
revertFocusWidget
setValuesContainer
suspendEventsEvents
triggerEvents
unEvents
unmaskWidget
Widget hierarchy
closestWidget
containsWidget
eachAncestorWidget
eachWidgetWidget
ownsWidget
queryWidget
queryAllWidget
upWidget
Events
21
Events
21beforeDestroyEvents
beforeHideWidget
beforeSetRecordContainer
beforeShowWidget
beforeStateApplyState
beforeStateSaveState
catchAllEvents
collapsePanel
destroyEvents
dirtyStateChangeContainer
elementCreatedWidget
expandPanel
focusInWidget
focusOutWidget
hideWidget
paintWidget
readOnlyWidget
recomposeWidget
resizeWidget
showWidget
toolClickPanel
Event handlers
21
Event handlers
21onBeforeDestroyEvents
onBeforeHideWidget
onBeforeSetRecordContainer
onBeforeShowWidget
onBeforeStateApplyState
onBeforeStateSaveState
onCatchAllEvents
onCollapsePanel
onDestroyEvents
onDirtyStateChangeContainer
onElementCreatedWidget
onExpandPanel
onFocusInWidget
onFocusOutWidget
onHideWidget
onPaintWidget
onReadOnlyWidget
onRecomposeWidget
onResizeWidget
onShowWidget
onToolClickPanel
Typedefs
7
Typedefs
7AlignSpecWidget
BryntumListenerConfigEvents
CellWidgetContextWidget
ColorWidget
DelayableConfigDelayable
KeyMapConfigKeyMap
PanelHeaderPanel
CSS variables
58
CSS variables
58| Name | Description |
|---|---|
--b-field-set-border-radius | Fieldset border-radius |
--b-field-set-border-width | Fieldset border-width |
--b-field-set-padding | Fieldset padding |
--b-field-set-border-color | Fieldset border-color |
--b-field-set-background | Fieldset background |
--b-field-set-label-font-size | Fieldset label font size |