Docs
API
-
Config
- barHeight
-
bbar
- bbarHeight
-
buttons
- buttonsHeight
- cls
- defaults
- draggable
-
events
-
footer
- height
- id
- i18n
-
items
- column
-
data
- defaults
- disabled
- displayKey
- editable
- emptyText
- events
-
format
- itemCheckBox
- inputHeight
- inputLabel
- inputWidth
- label
- labelAlign
- labelWidth
- listItemTpl
- leftTpl
- leftWidth
- max
- min
- minListWidth
- multiSelect
- multiToggle
- name
- showPassTip
- spin
- step
- subSearch
- tabIndex
- tip
- type
- value
- valueKey
- vtype
- width
-
lang
-
date
- method
- modal
- params
- renderOuter
- renderTo
- scrollable
- shadow
-
subTitle
-
subTBar
- allowToggle
- action
- cls
- data
- disabled
- displayKey
- editable
- emptyText
- enableToggle
- events
- format
- handler
- hidden
- id
- imageCls
- inputHeight
- itemCheckBox
- leftTpl
- leftWidth
- max
- menu
- minListWidth
- multiSelect
- multiToggle
- paramsMenu
- paramsText
- pressed
- spin
- step
- subSearch
- text
- tip
- toggleGroup
- type
- valueKey
- vtype
- width
- subTBarHeight
-
tbar
- allowToggle
- action
- cls
- data
- disabled
- displayKey
- editable
- emptyText
- enableToggle
- events
- format
- handler
- hidden
- id
- imageCls
- inputHeight
- itemCheckBox
- leftTpl
- leftWidth
- max
- menu
- minListWidth
- multiSelect
- multiToggle
- paramsMenu
- paramsText
- pressed
- spin
- step
- subSearch
- text
- tip
- toggleGroup
- type
- valueKey
- vtype
- width
- tbarHeight
-
title
segbutton
Segmented Button field type
Example
items: [{ label: 'Education', type: 'segbutton', name: 'education', multiToggle: true, items: [{ text: 'Bachelor' },{ text: 'Master', pressed: true },{ text: 'PhD', pressed: true },{ text: 'Doctor' }] },{ ...
Properties
allowToggle
BooleanEnable toggle.
... items: [{ label: 'Military', type: 'segbutton', name: 'military', items: [{ text: 'Yes', value: 'yes' },{ text: 'No', pressed: true, value: 'no' }] },{ ...
true items
ArrayButtons of segbutton field.
... items: [{ label: 'Military', type: 'segbutton', name: 'military', items: [{ text: 'Yes', value: 'yes' },{ text: 'No', pressed: true, value: 'no' }] },{ ...
label
StringText of field.
... items: [{ label: 'Military', type: 'segbutton', name: 'military', items: [{ text: 'Yes', value: 'yes' },{ text: 'No', pressed: true, value: 'no' }] },{ ...
labelAlign
StringAlign of label.
Values:
right
,left
,top
.... items: [{ label: 'Military', type: 'segbutton', name: 'military', labelAlign: 'right', items: [{ text: 'Yes', value: 'yes' },{ text: 'No', pressed: true, value: 'no' }] },{ ...
left multiToggle
BooleanEnable multi toggle of segbutton field.
... items: [{ label: 'Education', type: 'segbutton', name: 'education', multiToggle: true, items: [{ text: 'Bachelor' },{ text: 'Master', pressed: true },{ text: 'PhD', pressed: true },{ text: 'Doctor' }] },{ ...
false name
StringName of field over which it is possible to get value of field.
... items: [{ label: 'Military', type: 'segbutton', name: 'military', labelAlign: 'right', items: [{ text: 'Yes', value: 'yes' },{ text: 'No', pressed: true, value: 'no' }] },{ ...
tip
String|NumberField tip.
}, { label: 'Name', tip: 'Name', emptyText: 'Name', name: 'name' }, { label: 'SurName', tip: '{value}', emptyText: 'SurName', value: 'Johnson', name: 'surname' }, { label: 'E-mail', emptyText: 'E-mail', name: 'email', tip: function(field, value, label) { return field.label; } }, {
Sample on JSFiddle
undefined type
StringType of field (value - segbutton).
... items: [{ label: 'Military', type: 'segbutton', name: 'military', labelAlign: 'right', items: [{ text: 'Yes', value: 'yes' },{ text: 'No', pressed: true, value: 'no' }] },{ ...
Methods
disable
()Disable field.
field.disable();
enable
()Enable field.
field.enable();
setItems
(items: Array)Set new items for field.
field.setItems([{ text: 'Button 1', pressed: true },{ text: 'Button 2' },{ text: 'Button 3' }]);
setValue
(value: Array|Number|String)Set field value.
Fieldsegbutton
sets value in different way than other field types.// Set value by order index },{ type: 'segbutton', multiToggle: true, id: 'countries', items: [{ text: 'USA', value: 'usa' },{ text: 'Canada', value: 'canada' },{ text: 'Finland', value: 'finland' },{ text: 'UK', value: 'uk' },{ text: 'France', value: 'france' }] }], field.setValue(1);
// Set value by field value },{ type: 'segbutton', multiToggle: true, id: 'countries', items: [{ text: 'USA', value: 'usa' },{ text: 'Canada', value: 'canada' },{ text: 'Finland', value: 'finland' },{ text: 'UK', value: 'uk' },{ text: 'France', value: 'france' }] }], field.setValue('canada');
// Set values by field order },{ type: 'segbutton', multiToggle: true, id: 'countries', items: [{ text: 'USA', value: 'usa' },{ text: 'Canada', value: 'canada' },{ text: 'Finland', value: 'finland' },{ text: 'UK', value: 'uk' },{ text: 'France', value: 'france' }] }], field.setValue([1, 3]);
// Set values by field values },{ type: 'segbutton', multiToggle: true, id: 'countries', items: [{ text: 'USA', value: 'usa' },{ text: 'Canada', value: 'canada' },{ text: 'Finland', value: 'finland' },{ text: 'UK', value: 'uk' },{ text: 'France', value: 'france' }] }], field.setValue(['usa', 'canada']);
Sample on JSFiddle
setWidth
(value: Number)Set new field width.
field.setWidth(400);
Events
toggle
(segbutton, button, value, values)Fires when any child button's pressed state has changed.
- segbutton - link on self.
- button - .
button that changed pressed value. - value - pressed value.
- values - values(pressed/not pressed) of all buttons.
tbar: [{ type: 'segbutton', id: 'housesseg', multiToggle: true, items: [{ text: '1' },{ text: '2' },{ text: '3' }], events: [{ toggle: function(segbutton, button, value, values){ } }] },{
-
date