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>
8 <body onload="prettyPrint();">
9 <pre class="prettyprint lang-js">/*!
10 * Ext JS Library 3.2.0
11 * Copyright(c) 2006-2010 Ext JS, Inc.
13 * http://www.extjs.com/license
15 <div id="cls-Ext.form.SliderField"></div>/**
16 * @class Ext.form.SliderField
17 * @extends Ext.form.Field
18 * Wraps a {@link Ext.Slider Slider} so it can be used as a form field.
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.
25 Ext.form.SliderField = Ext.extend(Ext.form.Field, {
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>.
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.
44 * Initialize the component.
47 initComponent : function() {
48 var cfg = Ext.copyTo({
49 id: this.id + '-slider'
50 }, this.initialConfig, ['vertical', 'minValue', 'maxValue', 'decimalPrecision', 'keyIncrement', 'increment', 'clickToChange', 'animate']);
52 // only can use it if it exists.
54 var plug = this.tipText ? {getText: this.tipText} : {};
55 cfg.plugins = [new Ext.slider.Tip(plug)];
57 this.slider = new Ext.Slider(cfg);
58 Ext.form.SliderField.superclass.initComponent.call(this);
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.
67 onRender : function(ct, position){
74 Ext.form.SliderField.superclass.onRender.call(this, ct, position);
75 this.wrap = this.el.wrap({cls: 'x-form-field-wrap'});
76 this.slider.render(this.wrap);
80 * Ensure that the slider size is set automatically when the field resizes.
81 * @param {Object} w The width
82 * @param {Object} h The height
83 * @param {Object} aw The adjusted width
84 * @param {Object} ah The adjusted height
87 onResize : function(w, h, aw, ah){
88 Ext.form.SliderField.superclass.onResize.call(this, w, h, aw, ah);
89 this.slider.setSize(w, h);
93 * Initialize any events for this class.
96 initEvents : function(){
97 Ext.form.SliderField.superclass.initEvents.call(this);
98 this.slider.on('change', this.onChange, this);
102 * Utility method to set the value of the field when the slider changes.
103 * @param {Object} slider The slider object.
104 * @param {Object} v The new value.
107 onChange : function(slider, v){
108 this.setValue(v, undefined, true);
112 * Enable the slider when the field is enabled.
115 onEnable : function(){
116 Ext.form.SliderField.superclass.onEnable.call(this);
117 this.slider.enable();
121 * Disable the slider when the field is disabled.
124 onDisable : function(){
125 Ext.form.SliderField.superclass.onDisable.call(this);
126 this.slider.disable();
130 * Ensure the slider is destroyed when the field is destroyed.
133 beforeDestroy : function(){
134 Ext.destroy(this.slider);
135 Ext.form.SliderField.superclass.beforeDestroy.call(this);
139 * If a side icon is shown, do alignment to the slider
142 alignErrorIcon : function(){
143 this.errorIcon.alignTo(this.slider.el, 'tl-tr', [2, 0]);
146 <div id="method-Ext.form.SliderField-setMinValue"></div>/**
147 * Sets the minimum field value.
148 * @param {Number} v The new minimum value.
149 * @return {Ext.form.SliderField} this
151 setMinValue : function(v){
152 this.slider.setMinValue(v);
156 <div id="method-Ext.form.SliderField-setMaxValue"></div>/**
157 * Sets the maximum field value.
158 * @param {Number} v The new maximum value.
159 * @return {Ext.form.SliderField} this
161 setMaxValue : function(v){
162 this.slider.setMaxValue(v);
166 <div id="method-Ext.form.SliderField-setValue"></div>/**
167 * Sets the value for this field.
168 * @param {Number} v The new value.
169 * @param {Boolean} animate (optional) Whether to animate the transition. If not specified, it will default to the animate config.
170 * @return {Ext.form.SliderField} this
172 setValue : function(v, animate, /* private */ silent){
173 // silent is used if the setValue method is invoked by the slider
174 // which means we don't need to set the value on the slider.
176 this.slider.setValue(v, animate);
178 return Ext.form.SliderField.superclass.setValue.call(this, this.slider.getValue());
181 <div id="method-Ext.form.SliderField-getValue"></div>/**
182 * Gets the current value for this field.
183 * @return {Number} The current value.
185 getValue : function(){
186 return this.slider.getValue();
190 Ext.reg('sliderfield', Ext.form.SliderField);</pre>