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

      0  

    Default Slider Text Field

    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
    16
    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

    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

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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi