/** * Specialized {@link Ext.field.Slider} with a single thumb which only supports two {@link #value values}. * * ## Examples * * @example miniphone preview * Ext.Viewport.add({ * xtype: 'togglefield', * name: 'awesome', * label: 'Are you awesome?', * labelWidth: '40%' * }); * * Having a default value of 'toggled': * * @example miniphone preview * Ext.Viewport.add({ * xtype: 'togglefield', * name: 'awesome', * value: 1, * label: 'Are you awesome?', * labelWidth: '40%' * }); * * And using the {@link #value} {@link #toggle} method: * * @example miniphone preview * 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(); * } * } * ] * } * ]); */Ext.define('Ext.field.Toggle', { extend: 'Ext.field.SingleSlider', xtype : 'togglefield', alternateClassName: 'Ext.form.Toggle', requires: ['Ext.slider.Toggle'], config: { component: { 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, /** * @inheritdoc Ext.slider.Slider#value * @cfg {Boolean} value * @accessor */ value: false }, 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 */ initialize: function() { this.callParent(); this.publishState('value', this.getValue()); }, /** * @private */ updateActiveLabel: function(newActiveLabel, oldActiveLabel) { this.getComponent().element.dom.setAttribute('data-activelabel', newActiveLabel); }, /** * @private */ updateInactiveLabel: function(newInactiveLabel, oldInactiveLabel) { this.getComponent().element.dom.setAttribute('data-inactivelabel', newInactiveLabel); }, applyValue: function(value) { 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]); }, setComponentValue: function(value) { this.getComponent().setValue(value ? 1 : 0); }, /** * 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; }});