3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
8 * @class Ext.form.SliderField
9 * @extends Ext.form.Field
10 * Wraps a {@link Ext.Slider Slider} so it can be used as a form field.
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.
17 Ext.form.SliderField = Ext.extend(Ext.form.Field, {
20 * @cfg {Boolean} useTips
21 * True to use an Ext.slider.Tip to display tips for the value. Defaults to <tt>true</tt>.
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.
36 * Initialize the component.
39 initComponent : function() {
40 var cfg = Ext.copyTo({
41 id: this.id + '-slider'
42 }, this.initialConfig, ['vertical', 'minValue', 'maxValue', 'decimalPrecision', 'keyIncrement', 'increment', 'clickToChange', 'animate']);
44 // only can use it if it exists.
46 var plug = this.tipText ? {getText: this.tipText} : {};
47 cfg.plugins = [new Ext.slider.Tip(plug)];
49 this.slider = new Ext.Slider(cfg);
50 Ext.form.SliderField.superclass.initComponent.call(this);
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.
59 onRender : function(ct, position){
66 Ext.form.SliderField.superclass.onRender.call(this, ct, position);
67 this.wrap = this.el.wrap({cls: 'x-form-field-wrap'});
68 this.slider.render(this.wrap);
72 * Ensure that the slider size is set automatically when the field resizes.
73 * @param {Object} w The width
74 * @param {Object} h The height
75 * @param {Object} aw The adjusted width
76 * @param {Object} ah The adjusted height
79 onResize : function(w, h, aw, ah){
80 Ext.form.SliderField.superclass.onResize.call(this, w, h, aw, ah);
81 this.slider.setSize(w, h);
85 * Initialize any events for this class.
88 initEvents : function(){
89 Ext.form.SliderField.superclass.initEvents.call(this);
90 this.slider.on('change', this.onChange, this);
94 * Utility method to set the value of the field when the slider changes.
95 * @param {Object} slider The slider object.
96 * @param {Object} v The new value.
99 onChange : function(slider, v){
100 this.setValue(v, undefined, true);
104 * Enable the slider when the field is enabled.
107 onEnable : function(){
108 Ext.form.SliderField.superclass.onEnable.call(this);
109 this.slider.enable();
113 * Disable the slider when the field is disabled.
116 onDisable : function(){
117 Ext.form.SliderField.superclass.onDisable.call(this);
118 this.slider.disable();
122 * Ensure the slider is destroyed when the field is destroyed.
125 beforeDestroy : function(){
126 Ext.destroy(this.slider);
127 Ext.form.SliderField.superclass.beforeDestroy.call(this);
131 * If a side icon is shown, do alignment to the slider
134 alignErrorIcon : function(){
135 this.errorIcon.alignTo(this.slider.el, 'tl-tr', [2, 0]);
139 * Sets the minimum field value.
140 * @param {Number} v The new minimum value.
141 * @return {Ext.form.SliderField} this
143 setMinValue : function(v){
144 this.slider.setMinValue(v);
149 * Sets the maximum field value.
150 * @param {Number} v The new maximum value.
151 * @return {Ext.form.SliderField} this
153 setMaxValue : function(v){
154 this.slider.setMaxValue(v);
159 * Sets the value for this field.
160 * @param {Number} v The new value.
161 * @param {Boolean} animate (optional) Whether to animate the transition. If not specified, it will default to the animate config.
162 * @return {Ext.form.SliderField} this
164 setValue : function(v, animate, /* private */ silent){
165 // silent is used if the setValue method is invoked by the slider
166 // which means we don't need to set the value on the slider.
168 this.slider.setValue(v, animate);
170 return Ext.form.SliderField.superclass.setValue.call(this, this.slider.getValue());
174 * Gets the current value for this field.
175 * @return {Number} The current value.
177 getValue : function(){
178 return this.slider.getValue();
182 Ext.reg('sliderfield', Ext.form.SliderField);