PDA

View Full Version : Slider Text Field



tomalex0
15 Sep 2010, 3:34 AM
I have tried to create a slider with number-field associated with it which holds value of slider that can be edited also.
I have mentioned the code below
This can be specified as item in FormPanel also.
Main thing i wanted was to adjust the slider when value of number field is changed and if the value exceeds the maxValue then slider value will be same as the maxValue.

Hope it would come handy for someone.

Extension


Ext.form.TextfieldSlider = Ext.extend(Ext.Slider, {
isFormField: true,
initComponent: function() {
this.originalValue = this.value;
Ext.form.TextfieldSlider.superclass.initComponent.call(this);
},
onRender: function(){
Ext.form.TextfieldSlider.superclass.onRender.apply(this, arguments);
Ext.DomHelper.insertAfter(this.el,{
tag: 'div',
id: this.id +'_slidertextdiv',
style: 'position: relative; float:right;width:60px;height:20px;margin-top:-22px;'
});
this.sliderField = new Ext.form.NumberField({
renderTo:this.id +'_slidertextdiv',
id: this.id +'_slidertext',
name: this.name +'_slidertext',
value: this.value,
enableKeyEvents:true,
width:60,
minValue:this.minValue,
maxValue:this.maxValue ,
scope:this,
listeners: {
keyup : function() {
this.adjustValue.defer(500, this);
},
scope:this
}
});
},
adjustValue : function(){
this.setValue(this.sliderField.getValue());
if(this.sliderField.getValue()==""){
this.setValue(this.sliderField.minValue);
}
this.sliderField.clearInvalid();
},
setValue: function(v) {
v = parseFloat(v);
if(this.maxValue && v > this.maxValue) v = this.maxValue;
if(this.minValue && v < this.minValue) v = this.minValue;
Ext.form.TextfieldSlider.superclass.setValue.apply(this, [v]);

if(this.rendered){
if(v<=0){
Ext.getDom(this.id +'_slidertext').value=0;
} else {
Ext.getDom(this.id +'_slidertext').value=v;
}

}
},
reset: function() {
this.setValue(this.originalValue);
this.clearInvalid();
},
getName: function() {
return this.name;
},
validate: function() {
return true;
},
setMinValue : function(minValue){
this.minValue = minValue;
this.sliderField.minValue = minValue;
return minValue;
},
setMaxValue : function(maxValue){
this.maxValue = maxValue;
this.sliderField.maxValue = maxValue;
return maxValue
},
markInvalid: Ext.emptyFn,
clearInvalid: Ext.emptyFn
});
Ext.reg('textfieldslider', Ext.form.TextfieldSlider);

Example Code


{
xtype: 'textfieldslider',
name: 'slider',
minValue: 222,
maxValue: 2406,
fieldLabel: 'Slider Label',
scope:this,
listeners:{
change:function(slider,value){
}
}
}

kurt971
18 Sep 2010, 3:08 AM
Hi
I'm new to extjs, and I want to try to use your code , but I dont anderstand where to put your code in my pages... can you help? have you some examples of use for this? for the moment, I just use exemple "slider.html" and it's do the job, but use your extension is not as easy than "slider.html" I think... Where to put extension code? and can I add this to slider.js file?


new Ext.Slider({
renderTo: 'textfieldslider',
name: 'slider',
width: 214,
minValue: 0,
maxValue: 100
fieldLabel: 'Slider Label',
scope:this,
listeners:{
change:function(slider,value){
}
}
});

Thank you

tomalex0
19 Sep 2010, 9:34 PM
Try this



<html>
<head>
<title>Text Edit Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>

<script type="text/javascript">
Ext.form.TextfieldSlider = Ext.extend(Ext.Slider, {
isFormField: true,
initComponent: function() {
this.originalValue = this.value;
Ext.form.TextfieldSlider.superclass.initComponent.call(this);
},
onRender: function(){
Ext.form.TextfieldSlider.superclass.onRender.apply(this, arguments);
Ext.DomHelper.insertAfter(this.el,{
tag: 'div',
id: this.id +'_slidertextdiv',
style: 'position: relative; float:right;width:60px;height:20px;margin-top:-22px;'
});
this.sliderField = new Ext.form.NumberField({
renderTo:this.id +'_slidertextdiv',
id: this.id +'_slidertext',
name: this.name +'_slidertext',
value: this.value,
enableKeyEvents:true,
width:60,
minValue:this.minValue,
maxValue:this.maxValue ,
scope:this,
listeners: {
keyup : function() {
this.adjustValue.defer(500, this);
},
scope:this
}
});
},
adjustValue : function(){
this.setValue(this.sliderField.getValue());
if(this.sliderField.getValue()==""){
this.setValue(this.sliderField.minValue);
}
this.sliderField.clearInvalid();
},
setValue: function(v) {
v = parseFloat(v);
if(this.maxValue && v > this.maxValue) v = this.maxValue;
if(this.minValue && v < this.minValue) v = this.minValue;
Ext.form.TextfieldSlider.superclass.setValue.apply(this, [v]);

if(this.rendered){
if(v<=0){
Ext.getDom(this.id +'_slidertext').value=0;
} else {
Ext.getDom(this.id +'_slidertext').value=v;
}

}
},
reset: function() {
this.setValue(this.originalValue);
this.clearInvalid();
},
getName: function() {
return this.name;
},
validate: function() {
return true;
},
setMinValue : function(minValue){
this.minValue = minValue;
this.sliderField.minValue = minValue;
return minValue;
},
setMaxValue : function(maxValue){
this.maxValue = maxValue;
this.sliderField.maxValue = maxValue;
return maxValue
},
markInvalid: Ext.emptyFn,
clearInvalid: Ext.emptyFn
});
Ext.reg('textfieldslider', Ext.form.TextfieldSlider);


Ext.onReady(function() {
var labelpanel=new Ext.FormPanel({
frame: true,
labelWidth:100,
height: 250,
width: 510,
defaults: {
xtype: 'textfieldslider',
vertical: false,
width: 180,
minValue: 2,
maxValue: 100
},
items:[{
name: 'slider',
id: 'slider',
minValue: 0,
maxValue: 100,
fieldLabel: 'Text Slider',
value: 25
}],
buttons: [{
text: 'Save',
handler:function(){
alert(Ext.encode(labelpanel.getForm().getValues()));
}
}]
});
var mainPanel=new Ext.Panel({
renderTo: document.body,
items:[labelpanel]
});
});
</script>
</head>
<body/>
</html>

ajainvivek
8 Nov 2011, 3:20 AM
I am stuck with textfield for slider in sencha touch...can u help me out..

Thanks