1. #1
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    19
    tomalex0 will become famous soon enough tomalex0 will become famous soon enough

      0  

    Default Slider Text Field

    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
    Code:
    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
    Code:
    {
                        xtype: 'textfieldslider',
                        name: 'slider',
                        minValue: 222,
                        maxValue: 2406,
                        fieldLabel: 'Slider Label',
                        scope:this,
                        listeners:{
                            change:function(slider,value){
                            }
                        }
                    }
    Attached Images

  2. #2
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    1
    Vote Rating
    0
    kurt971 is on a distinguished road

      0  

    Default

    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?

    Code:
        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

  3. #3
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    19
    tomalex0 will become famous soon enough tomalex0 will become famous soon enough

      0  

    Default

    Try this

    Code:
    <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>

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Location
    Bangalore
    Posts
    23
    Vote Rating
    0
    ajainvivek is on a distinguished road

      0  

    Default Is the textfield possible to do in sencha touch

    I am stuck with textfield for slider in sencha touch...can u help me out..

    Thanks

  5. #5
    Sencha User
    Join Date
    Sep 2014
    Location
    Philippines
    Posts
    4
    Vote Rating
    0
    vhier.agang is on a distinguished road

      0  

    Default

    Hello Good day! I would like to ask on how can make code on progress slider component with the textfield. When I type on the text field, the progress slider will also indicate on how many letters that I have been type?Thank you so much!

Similar Threads

  1. Extending slider with text fields to accept range
    By alupuli in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 27 May 2010, 6:26 AM
  2. How to use a Slider as a form field
    By fzammetti in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 10 Dec 2008, 11:29 AM
  3. do not select existing text in text field when focus via tab key
    By mjlecomte in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 13 Jul 2008, 6:23 PM

Thread Participants: 3