/** * Specialized {@link Ext.field.Slider} with a single thumb which only supports * two {@link #value values}. * * ## Examples * * ```javascript * @example({ framework: 'extjs' }) * Ext.Viewport.add({ * xtype: 'togglefield', * name: 'awesome', * label: 'Are you awesome?', * labelWidth: '40%' * }); * ``` * * Having a default value of 'toggled': * * ```javascript * @example({ framework: 'extjs' }) * Ext.Viewport.add({ * xtype: 'togglefield', * name: 'awesome', * value: 1, * label: 'Are you awesome?', * labelWidth: '40%' * }); * ``` * * And using the {@link #value} {@link #toggle} method: * * ```javascript * @example({ framework: 'extjs' }) * Ext.Viewport.add([ * { * xtype: 'togglefield', * name: 'awesome', * value: 1, * label: 'Are you awesome?', * labelWidth: '40%' * }, * { * xtype: 'toolbar', * docked: 'top', * items: [ * { * xtype: 'button', * text: 'Toggle', * flex: 1, * handler: function() { * Ext.ComponentQuery.query('togglefield')[0].toggle(); * } * } * ] * } * ]); * ``` * ```javascript * @example({framework: 'ext-react', packages:['ext-react']}) * import React, { Component } from 'react'; * import { ExtContainer, ExtFormPanel, ExtToggleField } from '@sencha/ext-react'; * export default class MyExample extends Component { * render() { * return ( * <ExtContainer layout="center"> * <ExtFormPanel shadow> * <ExtToggleField boxLabel="On" value={true}/> * <ExtToggleField boxLabel="Off" value={false}/> * <ExtToggleField boxLabel="Disabled" disabled /> * <ExtToggleField boxLabel="Disabled (On)" disabled value={true} /> * </ExtFormPanel> * </ExtContainer> * ) * } * } * ``` * ```javascript * @example({framework: 'ext-angular', packages:['ext-angular']}) * import { Component } from '@angular/core' * declare var Ext: any; * * @Component({ * selector: 'app-root-1', * styles: [``], * template: ` * <ExtContainer layout="center"> * <ExtFormPanel shadow="true" > * <ExtToggleField boxLabel="On" value="true"></ExtToggleField> * <ExtToggleField boxLabel="Off" value="false"></ExtToggleField> * <ExtToggleField boxLabel="Disabled" disabled="true" > * </ExtToggleField> * <ExtToggleField boxLabel="Disabled (On)" disabled="true" * value="true" ></ExtToggleField> * </ExtFormPanel> * </ExtContainer> * ` * }) * export class AppComponent {} * ``` * ```html * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 1 }) * <ext-container layout="center"> * <ext-formpanel shadow="true"> * <ext-togglefield boxLabel="On" value="true"></ext-togglefield> * <ext-togglefield boxLabel="Off" value="false"></ext-togglefield> * <ext-togglefield boxLabel="Disabled" disabled="true"></ext-togglefield> * <ext-togglefield boxLabel="Disabled (On)" disabled="true" value="true"></ext-togglefield> * </ext-formpanel> * </ext-container> * ``` * ```javascript * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 2 }) * import '@sencha/ext-web-components/dist/ext-container.component'; * import '@sencha/ext-web-components/dist/ext-formpanel.component'; * import '@sencha/ext-web-components/dist/ext-togglefield.component'; * * export default class ToggleFieldComponent {} * ``` * */Ext.define('Ext.field.Toggle', { extend: 'Ext.field.SingleSlider', xtype: 'togglefield', alternateClassName: 'Ext.form.Toggle', requires: ['Ext.slider.Toggle'], /** * @cfg twoWayBindable * @inheritdoc */ twoWayBindable: { value: 1 }, /** * @cfg publishes * @inheritdoc */ publishes: { value: 1 }, config: { /** * @cfg slider * @inheritdoc */ slider: { xtype: 'toggleslider' }, /** * @cfg {String} activeLabel * The label to add to the toggle field when it is toggled on. Only available in * the Blackberry theme. * @accessor */ activeLabel: null, /** * @cfg {String} inactiveLabel * The label to add to the toggle field when it is toggled off. Only available in * the Blackberry theme. * @accessor */ inactiveLabel: null, /** * @cfg value * @inheritdoc Ext.slider.Slider#cfg-value * @accessor */ value: false }, /** * @cfg bodyAlign * @inheritdoc */ bodyAlign: 'start', /** * @property classCls * @inheritdoc */ classCls: Ext.baseCSSPrefix + 'togglefield', /** * @event change * Fires when an option selection has changed. * * Ext.Viewport.add({ * xtype: 'togglefield', * label: 'Event Example', * listeners: { * change: function(field, newValue, oldValue) { * console.log('Value of this toggle has changed:', (newValue) ? 'ON' : 'OFF'); * } * } * }); * * @param {Ext.field.Toggle} this * @param {Number} newValue the new value of this thumb * @param {Number} oldValue the old value of this thumb */ /** * @event dragstart * @hide */ /** * @event drag * @hide */ /** * @event dragend * @hide */ /** * @private */ updateActiveLabel: function(newActiveLabel, oldActiveLabel) { this.getSlider().element.dom.setAttribute('data-activelabel', newActiveLabel); }, /** * @private */ updateInactiveLabel: function(newInactiveLabel, oldInactiveLabel) { this.getSlider().element.dom.setAttribute('data-inactivelabel', newInactiveLabel); }, applyValue: function(value, oldValue) { value = this.callParent([value, oldValue]); if (typeof value !== 'boolean') { value = value !== 0; } return value; }, updateValue: function(value, oldValue) { var me = this, active = me.getActiveLabel(), inactive = me.getInactiveLabel(); if (active || inactive) { me.setLabel(value ? active : inactive); } me.callParent([value, oldValue]); }, setSliderValue: function(value) { this.getSlider().setValue(value ? 1 : 0); return !!value; }, /** * Toggles the value of this toggle field. * @return {Object} this */ toggle: function() { // We call setValue directly so the change event can be fired this.setValue(!this.getValue()); return this; }, /** * Returns the toggled state of the togglefield. * @return {Boolean} True if toggled on, else false * @since 7.0 */ getRawValue: function() { return this.getValue(); }, rawToValue: Ext.emptyFn});