Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: How to bring vertical Ext.form.Slider in Sencha touch?

  1. #1

    Default Answered: How to bring vertical Ext.form.Slider in Sencha touch?

    Ext.form.Slider how to bring in vertical side...

  2. I wanted/needed vertical sliders for an app I'm working on, so I dove into the code and overwrote everything I needed to make it work. I'm sure it could be improved upon by inverting the height and width attributes(as of right now width represents height since its really just a transform:rotate(-90)) as well as possible devising a way for multiple sliders to sit inside the panel without having to number them, and no doubt you may find it a bit quirky . I make no guarantees how this will work within the context of however you might decided to use it, but it should at least give anyone who wants vertical sliders a good starting point.

    PHP Code:
    vslide= new Ext.custom.VertSlider({value100,
            
    minValue0,
            
    maxValue200,
            
    width:400,
            
    slide_cnt:1        });
        
    vslide2= new Ext.custom.VertSlider({value50,
            
    minValue0,
            
    maxValue200,
            
    width:400,
            
    slide_cnt:2});
        
    vslide3=  new Ext.custom.VertSlider({value50,
            
    minValue0,
            
    maxValue200,
            
    width:400,
            
    slide_cnt:3});
        
    vslide4=  new Ext.custom.VertSlider({value50,
            
    minValue0,
            
    maxValue200,
            
    width:400,
            
    slide_cnt:4});
         
    testtab = new Ext.Panel({
            
    flex:1,
            
    title:'test',
            
    iconCls:'info',
            
    layout:{
                
    type:'hbox',
                
    align:'end'
            
    },
            
    items:[vslide,vslide2,vslide3,vslide4]
        }); 
    The rest of the javascripts in the zip. It was a bit too much to put into a code window as it required that I overwrite some of the Draggable functions but to have those apply properly I had to overwrite Ext.Component so that it would use my custom draggable, which required that I customize form.Field and Thumb as well.

    End result is something that works for me, if it works for you too, great. I expect I will also end up doing the same thing in touch 2, since charts 2 beta is now out I'm heading that way.

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    There is no default way to do this unfortunately.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  4. #3
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    12
    Answers
    2

    Default

    I wanted/needed vertical sliders for an app I'm working on, so I dove into the code and overwrote everything I needed to make it work. I'm sure it could be improved upon by inverting the height and width attributes(as of right now width represents height since its really just a transform:rotate(-90)) as well as possible devising a way for multiple sliders to sit inside the panel without having to number them, and no doubt you may find it a bit quirky . I make no guarantees how this will work within the context of however you might decided to use it, but it should at least give anyone who wants vertical sliders a good starting point.

    PHP Code:
    vslide= new Ext.custom.VertSlider({value100,
            
    minValue0,
            
    maxValue200,
            
    width:400,
            
    slide_cnt:1        });
        
    vslide2= new Ext.custom.VertSlider({value50,
            
    minValue0,
            
    maxValue200,
            
    width:400,
            
    slide_cnt:2});
        
    vslide3=  new Ext.custom.VertSlider({value50,
            
    minValue0,
            
    maxValue200,
            
    width:400,
            
    slide_cnt:3});
        
    vslide4=  new Ext.custom.VertSlider({value50,
            
    minValue0,
            
    maxValue200,
            
    width:400,
            
    slide_cnt:4});
         
    testtab = new Ext.Panel({
            
    flex:1,
            
    title:'test',
            
    iconCls:'info',
            
    layout:{
                
    type:'hbox',
                
    align:'end'
            
    },
            
    items:[vslide,vslide2,vslide3,vslide4]
        }); 
    The rest of the javascripts in the zip. It was a bit too much to put into a code window as it required that I overwrite some of the Draggable functions but to have those apply properly I had to overwrite Ext.Component so that it would use my custom draggable, which required that I customize form.Field and Thumb as well.

    End result is something that works for me, if it works for you too, great. I expect I will also end up doing the same thing in touch 2, since charts 2 beta is now out I'm heading that way.
    Attached Files Attached Files

  5. #4

    Default Unable to find any Js files inside

    Hello.

    We are working on a POC and stumbled on this post that seemed answers to our prayers... . But when we download I do not find the Js files inside. we are only finding a vertslider file with out any extensions inside the folder.
    Please reupload the zip file.

    Thanks
    Ramya

  6. #5
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    12
    Answers
    2

    Default

    you only need the vertslider file, include it below your sencha includes in your index.html and then just create the way I did in the example.

  7. #6
    Sencha User
    Join Date
    Oct 2011
    Posts
    27

    Default Getting a syntax error: parse error

    Hi, I tried including the above file using the script tag (as the file extension is not specified i used the script tag)
    <script src="sdk/vertslider"></script>


    in my index.html file and iam getting a syntax error. Can you please help me with this.

    Thanks in advance!

  8. #7
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    12
    Answers
    2

    Default

    try renaming the file to Ext.custom.VertSlider.js

    If that doesn't work I need to see the error to be of any help, the file has changed a little bit (gotten more complicated) to support a few more things I needed , but I'm also not using it anymore because we've moved to touch 2 (which I also created vertical sliders for if anyone needs/wants them).

  9. #8
    Sencha User
    Join Date
    Oct 2011
    Posts
    27

    Default

    If you have created vertical sliders for Sencha Touch 2 can you please share it? coz iam using Sencha Touch 2 in my project and need to implement the vertical sliders.


    Thanks!

  10. #9
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    12
    Answers
    2

    Default

    this is the touch 2 Ext.custom.Vertslider.js
    Attached Files Attached Files

  11. #10
    Sencha User
    Join Date
    Oct 2011
    Posts
    27

    Default

    Thanks a lot! We have to use this the same way you have shown in the above example right?

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •