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