Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / 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);