docs/source/SliderField.html

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