Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 11 additions & 15 deletions data/desktop/common_config.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
Common Configuration for Form and Toolbar Controls
=============

UI-related [Toolbar](desktop/toolbar.md) and [Form](desktop/form.md) are specific components since they don't mean much as they are yet act as containers for [controls](desktop/controls.md) like buttons and icons, input fields
and selection controls.
UI-related [Toolbar](desktop/toolbar.md) and [Form](desktop/form.md) are container components for [controls](desktop/controls.md) like buttons and icons, input fields
and selection controls.

All the controls are included in a toolbar and form as an array of rows/columns or elements respectively. Each control has its own configuration. However, sometimes some properties like width/height, label alignment
and label position coincide, which is done to achieve the uniformity of the component's look-and-feel.
All of the controls can be included in a toolbar or form as an array of rows/columns or elements respectively. Each control has its own configuration. However, sometimes some properties like width/height, label alignment
and label position coincide, which is done to achieve the uniformity of the component's look-and-feel.

To avoid multiple repetition of one and the same property for controls belonging to one and the same toolbar you can make use of the **elementsConfig** property. Included into a form or toolbar it sets common configuration for
all its children (controls).
To avoid repetition of the same property for controls belonging to the same toolbar you can make use of the **elementsConfig** property. Included into a form or toolbar it sets common configuration for
all its children (controls).

{{snippet
Form Configuration
}}
~~~js
webix.ui({
view:"form",
elements: [//..elenemts
view:"form",
elements: [//..elenemts
]
elementsConfig:{
labelPosition:"top",
Expand All @@ -28,7 +28,7 @@ view:"form",

{{sample 13_form/02_api/08_common_config.html }}

All the controls in this form with have the label on their top and respond to data alteration in input fields.
All the controls in this form will have the label on their top and respond to data alteration in input fields.

{{snippet
Toolbar Configuration
Expand All @@ -39,7 +39,7 @@ view:"toolbar",
elements: [
{ view:"button"},
{ view:"segmented", options:[...]},
{ view:"text"},
{ view:"text"},
{ view:"select", options:[...]}
],
elementsConfig:{
Expand All @@ -51,8 +51,4 @@ view:"toolbar",

{{sample 02_toolbar/15_common_config.html }}

No matter how different the controls on the toolbar are, they will all get the same height and width as well as the same "edit" value.




No matter how different the controls on the toolbar are, they will all get the same height and width as well as the same "edit" value.