196 lines
6.9 KiB
HTML
196 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>The source code</title>
|
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
|
<style type="text/css">
|
|
.highlight { display: block; background-color: #ddd; }
|
|
</style>
|
|
<script type="text/javascript">
|
|
function highlight() {
|
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="prettyPrint(); highlight();">
|
|
<pre class="prettyprint lang-js"><span id='Ext-form-SliderField-method-constructor'><span id='Ext-form-SliderField'>/**
|
|
</span></span> * @class Ext.form.SliderField
|
|
* @extends Ext.form.Field
|
|
* Wraps a {@link Ext.slider.MultiSlider Slider} so it can be used as a form field.
|
|
* @constructor
|
|
* Creates a new SliderField
|
|
* @param {Object} config Configuration options. Note that you can pass in any slider configuration options, as well as
|
|
* as any field configuration options.
|
|
* @xtype sliderfield
|
|
*/
|
|
Ext.form.SliderField = Ext.extend(Ext.form.Field, {
|
|
|
|
<span id='Ext-form-SliderField-cfg-useTips'> /**
|
|
</span> * @cfg {Boolean} useTips
|
|
* True to use an Ext.slider.Tip to display tips for the value. Defaults to <tt>true</tt>.
|
|
*/
|
|
useTips : true,
|
|
|
|
<span id='Ext-form-SliderField-cfg-tipText'> /**
|
|
</span> * @cfg {Function} tipText
|
|
* A function used to display custom text for the slider tip. Defaults to <tt>null</tt>, which will
|
|
* use the default on the plugin.
|
|
*/
|
|
tipText : null,
|
|
|
|
<span id='Ext-form-SliderField-property-actionMode'> // private override
|
|
</span> actionMode: 'wrap',
|
|
|
|
<span id='Ext-form-SliderField-method-initComponent'> /**
|
|
</span> * Initialize the component.
|
|
* @private
|
|
*/
|
|
initComponent : function() {
|
|
var cfg = Ext.copyTo({
|
|
id: this.id + '-slider'
|
|
}, this.initialConfig, ['vertical', 'minValue', 'maxValue', 'decimalPrecision', 'keyIncrement', 'increment', 'clickToChange', 'animate']);
|
|
|
|
// only can use it if it exists.
|
|
if (this.useTips) {
|
|
var plug = this.tipText ? {getText: this.tipText} : {};
|
|
cfg.plugins = [new Ext.slider.Tip(plug)];
|
|
}
|
|
this.slider = new Ext.Slider(cfg);
|
|
Ext.form.SliderField.superclass.initComponent.call(this);
|
|
},
|
|
|
|
<span id='Ext-form-SliderField-method-onRender'> /**
|
|
</span> * Set up the hidden field
|
|
* @param {Object} ct The container to render to.
|
|
* @param {Object} position The position in the container to render to.
|
|
* @private
|
|
*/
|
|
onRender : function(ct, position){
|
|
this.autoCreate = {
|
|
id: this.id,
|
|
name: this.name,
|
|
type: 'hidden',
|
|
tag: 'input'
|
|
};
|
|
Ext.form.SliderField.superclass.onRender.call(this, ct, position);
|
|
this.wrap = this.el.wrap({cls: 'x-form-field-wrap'});
|
|
this.resizeEl = this.positionEl = this.wrap;
|
|
this.slider.render(this.wrap);
|
|
},
|
|
|
|
<span id='Ext-form-SliderField-method-onResize'> /**
|
|
</span> * Ensure that the slider size is set automatically when the field resizes.
|
|
* @param {Object} w The width
|
|
* @param {Object} h The height
|
|
* @param {Object} aw The adjusted width
|
|
* @param {Object} ah The adjusted height
|
|
* @private
|
|
*/
|
|
onResize : function(w, h, aw, ah){
|
|
Ext.form.SliderField.superclass.onResize.call(this, w, h, aw, ah);
|
|
this.slider.setSize(w, h);
|
|
},
|
|
|
|
<span id='Ext-form-SliderField-method-initEvents'> /**
|
|
</span> * Initialize any events for this class.
|
|
* @private
|
|
*/
|
|
initEvents : function(){
|
|
Ext.form.SliderField.superclass.initEvents.call(this);
|
|
this.slider.on('change', this.onChange, this);
|
|
},
|
|
|
|
<span id='Ext-form-SliderField-method-onChange'> /**
|
|
</span> * Utility method to set the value of the field when the slider changes.
|
|
* @param {Object} slider The slider object.
|
|
* @param {Object} v The new value.
|
|
* @private
|
|
*/
|
|
onChange : function(slider, v){
|
|
this.setValue(v, undefined, true);
|
|
},
|
|
|
|
<span id='Ext-form-SliderField-method-onEnable'> /**
|
|
</span> * Enable the slider when the field is enabled.
|
|
* @private
|
|
*/
|
|
onEnable : function(){
|
|
Ext.form.SliderField.superclass.onEnable.call(this);
|
|
this.slider.enable();
|
|
},
|
|
|
|
<span id='Ext-form-SliderField-method-onDisable'> /**
|
|
</span> * Disable the slider when the field is disabled.
|
|
* @private
|
|
*/
|
|
onDisable : function(){
|
|
Ext.form.SliderField.superclass.onDisable.call(this);
|
|
this.slider.disable();
|
|
},
|
|
|
|
<span id='Ext-form-SliderField-method-beforeDestroy'> /**
|
|
</span> * Ensure the slider is destroyed when the field is destroyed.
|
|
* @private
|
|
*/
|
|
beforeDestroy : function(){
|
|
Ext.destroy(this.slider);
|
|
Ext.form.SliderField.superclass.beforeDestroy.call(this);
|
|
},
|
|
|
|
<span id='Ext-form-SliderField-method-alignErrorIcon'> /**
|
|
</span> * If a side icon is shown, do alignment to the slider
|
|
* @private
|
|
*/
|
|
alignErrorIcon : function(){
|
|
this.errorIcon.alignTo(this.slider.el, 'tl-tr', [2, 0]);
|
|
},
|
|
|
|
<span id='Ext-form-SliderField-method-setMinValue'> /**
|
|
</span> * Sets the minimum field value.
|
|
* @param {Number} v The new minimum value.
|
|
* @return {Ext.form.SliderField} this
|
|
*/
|
|
setMinValue : function(v){
|
|
this.slider.setMinValue(v);
|
|
return this;
|
|
},
|
|
|
|
<span id='Ext-form-SliderField-method-setMaxValue'> /**
|
|
</span> * Sets the maximum field value.
|
|
* @param {Number} v The new maximum value.
|
|
* @return {Ext.form.SliderField} this
|
|
*/
|
|
setMaxValue : function(v){
|
|
this.slider.setMaxValue(v);
|
|
return this;
|
|
},
|
|
|
|
<span id='Ext-form-SliderField-method-setValue'> /**
|
|
</span> * Sets the value for this field.
|
|
* @param {Number} v The new value.
|
|
* @param {Boolean} animate (optional) Whether to animate the transition. If not specified, it will default to the animate config.
|
|
* @return {Ext.form.SliderField} this
|
|
*/
|
|
setValue : function(v, animate, /* private */ silent){
|
|
// silent is used if the setValue method is invoked by the slider
|
|
// which means we don't need to set the value on the slider.
|
|
if(!silent){
|
|
this.slider.setValue(v, animate);
|
|
}
|
|
return Ext.form.SliderField.superclass.setValue.call(this, this.slider.getValue());
|
|
},
|
|
|
|
<span id='Ext-form-SliderField-method-getValue'> /**
|
|
</span> * Gets the current value for this field.
|
|
* @return {Number} The current value.
|
|
*/
|
|
getValue : function(){
|
|
return this.slider.getValue();
|
|
}
|
|
});
|
|
|
|
Ext.reg('sliderfield', Ext.form.SliderField);</pre>
|
|
</body>
|
|
</html>
|