PDA

View Full Version : Slider as a form element



borg
18 Feb 2010, 10:16 AM
Since a slider isn't a form element it doesn't submit it's value when it's used in a form. Apparently if you set isFormField: true or maybe config: { isFormField: true } (not sure which) it does something to make it work but I couldn't get it working without overriding the slider like below and creating a hidden form field. Any ideas? Also, unless you change the slider value, the original value won't get put into the hidden form element. How can I fix that? I could put value: 3 in the onrender function but I want to pull it from the slider init

Or is there a way to do it without overriding the slider? I read something about setting isFormField: true in the slider's config?


Ext.form.SliderField = Ext.extend(Ext.Slider, {
isFormField: true,
initComponent: function() {
this.originalValue = this.value;
Ext.form.SliderField.superclass.initComponent.call(this);
},
onRender: function(){
Ext.form.SliderField.superclass.onRender.apply(this, arguments);
this.hiddenEl = this.el.createChild({
tag: 'input', type: 'hidden', name: this.name || this.id
});
},
setValue: function(v) {
v = parseInt(v);
if(this.maxValue && v > this.maxValue) v = this.maxValue;
if(this.minValue && v < this.minValue) v = this.minValue;
Ext.form.SliderField.superclass.setValue.apply(this, [v]);
if(this.rendered)
this.hiddenEl.dom.value = v;
},
reset: function() {
this.setValue(this.originalValue);
this.clearInvalid();
},
getName: function() {
return this.name;
},
validate: function() {
return true;
},
markInvalid: Ext.emptyFn,
clearInvalid: Ext.emptyFn
});
Ext.reg('sliderfield', Ext.form.SliderField);

{
xtype: 'sliderfield',
name: 'q1',
increment: 1,
value: 3,
minValue: 1,
maxValue: 5
}

Zamolxesz
23 Mar 2010, 3:01 PM
Noticed this as well, will try your code out.

steffenk
23 Mar 2010, 4:19 PM
Maybe you missed the example? It's simple:
http://www.extjs.com/deploy/ext-3.2-beta/examples/slider/slider-field.html