extjs/modern/modern/src/field/SingleSlider.js

   1 /**
   2  * The slider is a way to allow the user to select a value from a given numerical range. You might use it for choosing
   3  */
   4 Ext.define('Ext.field.SingleSlider', {
   5     extend  : 'Ext.field.Slider',
   6     xtype   : 'singlesliderfield',
   7
   8     /**
   9      * @event dragchange
  10      * Fires when the value changes.
  11      * @param {Ext.field.Slider} me
  12      * @param {Number} newValue The new value.
  13      * @param {Number} oldValue The old value.
  14      */
  15
  16     /**
  17      * @event dragchange
  18      * Fires when the value changes via drag.
  19      * @param {Ext.field.Slider} me
  20      * @param {Ext.slider.Slider} sl Slider Component.
  21      * @param {Number} newValue The new value.
  22      * @param {Number} oldValue The old value.
  23      */
  24
  25     /**
  26     * @event dragstart
  27     * Fires when the slider thumb starts a drag operation.
  28     * @param {Ext.field.Slider} this
  29     * @param {Ext.slider.Slider} sl Slider Component.
  30     * @param {Ext.slider.Thumb} thumb The thumb being dragged.
  31     * @param {Array} value The start value.
  32     * @param {Ext.event.Event} e
  33     */
  34
  35     /**
  36     * @event drag
  37     * Fires when the slider thumb starts a drag operation.
  38     * @param {Ext.field.Slider} this
  39     * @param {Ext.slider.Slider} sl Slider Component.
  40     * @param {Ext.slider.Thumb} thumb The thumb being dragged.
  41     * @param {Ext.event.Event} e
  42     */
  43
  44     /**
  45     * @event dragend
  46     * Fires when the slider thumb ends a drag operation.
  47     * @param {Ext.field.Slider} this
  48     * @param {Ext.slider.Slider} sl Slider Component.
  49     * @param {Ext.slider.Thumb} thumb The thumb being dragged.
  50     * @param {Array} value The end value.
  51     * @param {Ext.event.Event} e
  52     */
  53
  54     /**
  55      * @inheritdoc Ext.slider.Slider#value
  56      * @cfg {Number} value
  57      * @accessor
  58      */
  59
  60     defaultBindProperty: 'value',
  61
  62     publishes: {
  63         value: 1
  64     },
  65
  66     initialize: function() {
  67         this.callParent();
  68         this.publishState('value', this.getValue());
  69     },
  70
  71     applyValue: function(value, oldValue) {
  72         value = this.callParent([value, oldValue]);
  73         if (value && Ext.isArray(value)) {
  74             value = value[0];
  75         }
  76         return value;
  77     },
  78
  79     getValue: function() {
  80         var value = this.callParent();
  81         if (value && Ext.isArray(value)) {
  82             value = value[0];
  83         }
  84         return value;
  85     },
  86
  87     onSliderChange: function(slider, thumb, newValue, oldValue) {
  88         this.setValue(newValue);
  89         this.fireEvent('dragchange', this, slider, newValue, oldValue);
  90     },
  91
  92     onSliderDragStart: function(slider, thumb, startValue, e) {
  93         this.fireEvent('dragstart', this, slider, startValue, e);
  94     },
  95
  96     onSliderDrag: function(slider, thumb, value, e) {
  97         var me = this;
  98         if (me.getLiveUpdate()) {
  99             me.setValue(value);
 100         }
 101         me.fireEvent('drag', me, slider, value, e);
 102     },
 103
 104     onSliderDragEnd: function(slider, thumb, startValue, e) {
 105         this.fireEvent('dragend', this, slider, startValue, e);
 106     }
 107 });