src/widgets/form/SliderField.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 /**
   8  * @class Ext.form.SliderField
   9  * @extends Ext.form.Field
  10  * Wraps a {@link Ext.slider.MultiSlider Slider} so it can be used as a form field.
  11  * @constructor
  12  * Creates a new SliderField
  13  * @param {Object} config Configuration options. Note that you can pass in any slider configuration options, as well as
  14  * as any field configuration options.
  15  * @xtype sliderfield
  16  */
  17 Ext.form.SliderField = Ext.extend(Ext.form.Field, {
  18
  19     /**
  20      * @cfg {Boolean} useTips
  21      * True to use an Ext.slider.Tip to display tips for the value. Defaults to <tt>true</tt>.
  22      */
  23     useTips : true,
  24
  25     /**
  26      * @cfg {Function} tipText
  27      * A function used to display custom text for the slider tip. Defaults to <tt>null</tt>, which will
  28      * use the default on the plugin.
  29      */
  30     tipText : null,
  31
  32     // private override
  33     actionMode: 'wrap',
  34
  35     /**
  36      * Initialize the component.
  37      * @private
  38      */
  39     initComponent : function() {
  40         var cfg = Ext.copyTo({
  41             id: this.id + '-slider'
  42         }, this.initialConfig, ['vertical', 'minValue', 'maxValue', 'decimalPrecision', 'keyIncrement', 'increment', 'clickToChange', 'animate']);
  43
  44         // only can use it if it exists.
  45         if (this.useTips) {
  46             var plug = this.tipText ? {getText: this.tipText} : {};
  47             cfg.plugins = [new Ext.slider.Tip(plug)];
  48         }
  49         this.slider = new Ext.Slider(cfg);
  50         Ext.form.SliderField.superclass.initComponent.call(this);
  51     },
  52
  53     /**
  54      * Set up the hidden field
  55      * @param {Object} ct The container to render to.
  56      * @param {Object} position The position in the container to render to.
  57      * @private
  58      */
  59     onRender : function(ct, position){
  60         this.autoCreate = {
  61             id: this.id,
  62             name: this.name,
  63             type: 'hidden',
  64             tag: 'input'
  65         };
  66         Ext.form.SliderField.superclass.onRender.call(this, ct, position);
  67         this.wrap = this.el.wrap({cls: 'x-form-field-wrap'});
  68         this.resizeEl = this.positionEl = this.wrap;
  69         this.slider.render(this.wrap);
  70     },
  71
  72     /**
  73      * Ensure that the slider size is set automatically when the field resizes.
  74      * @param {Object} w The width
  75      * @param {Object} h The height
  76      * @param {Object} aw The adjusted width
  77      * @param {Object} ah The adjusted height
  78      * @private
  79      */
  80     onResize : function(w, h, aw, ah){
  81         Ext.form.SliderField.superclass.onResize.call(this, w, h, aw, ah);
  82         this.slider.setSize(w, h);
  83     },
  84
  85     /**
  86      * Initialize any events for this class.
  87      * @private
  88      */
  89     initEvents : function(){
  90         Ext.form.SliderField.superclass.initEvents.call(this);
  91         this.slider.on('change', this.onChange, this);
  92     },
  93
  94     /**
  95      * Utility method to set the value of the field when the slider changes.
  96      * @param {Object} slider The slider object.
  97      * @param {Object} v The new value.
  98      * @private
  99      */
 100     onChange : function(slider, v){
 101         this.setValue(v, undefined, true);
 102     },
 103
 104     /**
 105      * Enable the slider when the field is enabled.
 106      * @private
 107      */
 108     onEnable : function(){
 109         Ext.form.SliderField.superclass.onEnable.call(this);
 110         this.slider.enable();
 111     },
 112
 113     /**
 114      * Disable the slider when the field is disabled.
 115      * @private
 116      */
 117     onDisable : function(){
 118         Ext.form.SliderField.superclass.onDisable.call(this);
 119         this.slider.disable();
 120     },
 121
 122     /**
 123      * Ensure the slider is destroyed when the field is destroyed.
 124      * @private
 125      */
 126     beforeDestroy : function(){
 127         Ext.destroy(this.slider);
 128         Ext.form.SliderField.superclass.beforeDestroy.call(this);
 129     },
 130
 131     /**
 132      * If a side icon is shown, do alignment to the slider
 133      * @private
 134      */
 135     alignErrorIcon : function(){
 136         this.errorIcon.alignTo(this.slider.el, 'tl-tr', [2, 0]);
 137     },
 138
 139     /**
 140      * Sets the minimum field value.
 141      * @param {Number} v The new minimum value.
 142      * @return {Ext.form.SliderField} this
 143      */
 144     setMinValue : function(v){
 145         this.slider.setMinValue(v);
 146         return this;
 147     },
 148
 149     /**
 150      * Sets the maximum field value.
 151      * @param {Number} v The new maximum value.
 152      * @return {Ext.form.SliderField} this
 153      */
 154     setMaxValue : function(v){
 155         this.slider.setMaxValue(v);
 156         return this;
 157     },
 158
 159     /**
 160      * Sets the value for this field.
 161      * @param {Number} v The new value.
 162      * @param {Boolean} animate (optional) Whether to animate the transition. If not specified, it will default to the animate config.
 163      * @return {Ext.form.SliderField} this
 164      */
 165     setValue : function(v, animate, /* private */ silent){
 166         // silent is used if the setValue method is invoked by the slider
 167         // which means we don't need to set the value on the slider.
 168         if(!silent){
 169             this.slider.setValue(v, animate);
 170         }
 171         return Ext.form.SliderField.superclass.setValue.call(this, this.slider.getValue());
 172     },
 173
 174     /**
 175      * Gets the current value for this field.
 176      * @return {Number} The current value.
 177      */
 178     getValue : function(){
 179         return this.slider.getValue();
 180     }
 181 });
 182
 183 Ext.reg('sliderfield', Ext.form.SliderField);