Home

ToggleSlide & ToggleSlideField

The Ext.ux.ToogleSlide is intended to add a little flair to the commonly used checkbox or toggle button in form but in function as well. In form it looks and feels like a toogle on the iPhone. In function it can act like a familiar toggle button carrying a binary value but it can also be used in a non binary mode where the ‘on’ label text and ‘off’ label text is exposed as the value to clients. The widget can exist outside of existing containers or it can be used in toolbars or as form fields via the Ext.ux.ToggleSlideField.

Demos:
Blue Theme
Gray Theme
Access Theme

Configuration & Events

As an extension to Ext.Component the ToggleSlide supports all the config options (minus ‘cls’) and events of its parent. Two additional events are supported: beforechange & change. beforechange allows listeners to determine if the transition is correct given the current view state and change obviously notifies listeners that the internal state has changed.

The following is a listing of the config options with default values that control the look and behavior of a ToogleSlide instance:

@cfg {Number} duration The duration for the slide animation (defaults to .09)
duration: .09,

@cfg {String} onText The text to display when the toggle is in the ‘On’ position (defaults to ‘ON’)
onText: ‘ON’,

@cfg {String} offText The text to display when the toggle is in the ‘Off’ position (defaults to ‘OFF’)
offText: ‘OFF’,

@cfg {Boolean} resizeHandle Specifies whether the drag handle should be resized to cover the on or off side (defaults to true)
resizeHandle: true,

@cfg {Boolean} resizeContainer Specifies whether the contain element should be resized (defaults to true)
resizeContainer: true,

@cfg {String} onLabelCls The CSS class for the on label (defaults to ‘x-toggle-slide-label-on’)
onLabelCls: ‘x-toggle-slide-label-on’,

@cfg {String} ofLabelCls The CSS class for the off label (defaults to ‘x-toggle-slide-label-off’)
offLabelCls: ‘x-toggle-slide-label-off’,

@cfg {String} handleCls The CSS class for the drag handle (defaults to ‘x-toggle-slide-handle’)
handleCls: ‘x-toggle-slide-handle’,

@cfg {String} handleCenterCls The CSS class for the drag handle’s center el (defaults to ‘x-toggle-slide-handle-center’)
handleCenterCls: ‘x-toggle-slide-handle-center’,

@cfg {String} handleCenterCls The CSS class for the drag handle’s right el (defaults to ‘x-toggle-slide-handle-right’)
handleRightCls: ‘x-toggle-slide-handle-right’,

@cfg {Boolean} state The initial state of the Toggle (defaults to false)
state: false,

@cfg {Boolean} booleanMode Determines whether the internal value is represented as a Boolean. If not in booleanMode
the internal value will be represented as the on or off label text. The value passed to event listeners will also
be determined on this setting (defaults to true)
booleanMode: true,

ToggleSlideField

The Ext.ux.form.ToggleSlideField is an extension of Ext.form.Field. It supports all the config options and events of the Field as well as the ToggleSlide. The actual value of the Toggle field is maintained in a hidden input field so that the value will get posted with the form.