PDA

View Full Version : slider with a value field



mbains
13 Jun 2011, 5:11 PM
Hi,
I'm attempting to extend the built in sencha touch slider with one that displays an editable value.

In the code below, I've simply added an <input> in the slider's template with some listeners to keep the thumb and the <input>'s values in sync. It seems to work fine in chrome(desktop) and IPAD, however on the android browser, I'm unable to clear the <input> field using the backspace key.


Ext.ux.Slider = Ext.extend(Ext.form.Slider, {
sliderfieldstyle: "width: 39px; " +
"padding: 0px 0px 0px 2px; ",

renderTpl: [
'<tpl if="label">',
'<div class="x-form-label"><span>{label}</span></div>',
'</tpl>',
'<tpl if="fieldEl">',
'<input type=text type=number id={valdisp} style="{sliderfieldcls}" value="">',
'<div id="{inputId}" name="{name}" class="{fieldCls}"',
'<tpl if="tabIndex">tabIndex="{tabIndex}"</tpl>',
'<tpl if="style">style="{style}" </tpl>',
'/></tpl>'
],
constructor: function(config) {
Ext.ux.Slider.superclass.constructor.call(this, config)
},
initRenderData: function() {
Ext.ux.Slider.superclass.initRenderData.apply(this, arguments)
Ext.applyIf(this.renderData, {
valdisp: this.renderData.inputId + '-uslider',
sliderfieldcls: this.sliderfieldstyle
});
return this.renderData;
},

afterRender: function() {
this.slidval = Ext.select('input', this.el.dom).elements[0]
var me = this;
this.slidval.value = this.getValue();

//register for field updates
this.slidval.onchange = function(val) {
//console.log("Setting slider field value: " + val.srcElement.value)
me.setValue(val.srcElement.value);
}

//register for slider updates
this.on('change', function (slider, thumb, newValue, oldValue) {
slider.setSliderFieldValue(newValue);
});
this.on('drag', function(slider, thumb, newValue) {
slider.setSliderFieldValue(newValue);
});

Ext.ux.Slider.superclass.afterRender.call(this, arguments);
},

setSliderFieldValue: function(constrainedVal) {
if(this.slidval != null && this.slidval.value != constrainedVal)
{
//console.log("+++ " + constrainedVal);
this.slidval.value = constrainedVal;
}
}

});

Appreciate any help
-BR