1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    Germany
    Posts
    21
    Vote Rating
    0
    Answers
    2
    gulsan is on a distinguished road

      0  

    Default Answered: Making scrollbar visible all the time

    Answered: Making scrollbar visible all the time


    Hi,

    I wonder if there's a way to make the scrollbar of a list/panel visible all the time? I mean that the scrollbar should not only be visible when I touch the panel.

    Any ideas?

  2. Quote Originally Posted by gulsan View Post
    Thank you for your quick answer andreacammarata =)

    But there's still one thing that bothers me. With the code you provided I have still to touch the panel for once. So is it also possible to show the indicators even without touching the panel for once? Say as soon as I get to see the panel I want to see the scroll indicators as well.
    You are welcome gulsan
    I personally don't like your choose to show you the scrollbars all the time, but if you want do that, and you want to show them from the beginning, you can do that like follow:

    Code:
    Ext.regApplication('Sample,', {
        
        launch: function() {
            
            Ext.override(Ext.util.Scroller.Indicator, {
                hide: function() {
                    var me = this;
                    if (this.hideTimer) {
                        clearTimeout(this.hideTimer);
                    }
                    return this;
                }
            });
    
            var viewport = new Ext.Panel({
                fullscreen: true,
                scroll: 'vertical',
                html: 'My Panel',
                listeners: {
                    afterRender: function(pnl){
    
                        //Getting the ScrollView
                        var sw = pnl.scroller.scrollView;
                        
                        //Updating the vertical scrollbar size
                        sw.indicators.vertical.setSize(pnl.getHeight());
                        
                        //Show the indicators
                        sw.showIndicators();
    
                    }
                }
            });
    
        }
        
    });
    Hope this helps

  3. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Vote Rating
    23
    Answers
    148
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Hi gulsan,
    Take a look at this thread.

    http://www.sencha.com/forum/showthre...ow-permanently

    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  4. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    Germany
    Posts
    21
    Vote Rating
    0
    Answers
    2
    gulsan is on a distinguished road

      0  

    Default


    Thank you for your quick answer andreacammarata =)

    But there's still one thing that bothers me. With the code you provided I have still to touch the panel for once. So is it also possible to show the indicators even without touching the panel for once? Say as soon as I get to see the panel I want to see the scroll indicators as well.

  5. #4
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Vote Rating
    23
    Answers
    148
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Quote Originally Posted by gulsan View Post
    Thank you for your quick answer andreacammarata =)

    But there's still one thing that bothers me. With the code you provided I have still to touch the panel for once. So is it also possible to show the indicators even without touching the panel for once? Say as soon as I get to see the panel I want to see the scroll indicators as well.
    You are welcome gulsan
    I personally don't like your choose to show you the scrollbars all the time, but if you want do that, and you want to show them from the beginning, you can do that like follow:

    Code:
    Ext.regApplication('Sample,', {
        
        launch: function() {
            
            Ext.override(Ext.util.Scroller.Indicator, {
                hide: function() {
                    var me = this;
                    if (this.hideTimer) {
                        clearTimeout(this.hideTimer);
                    }
                    return this;
                }
            });
    
            var viewport = new Ext.Panel({
                fullscreen: true,
                scroll: 'vertical',
                html: 'My Panel',
                listeners: {
                    afterRender: function(pnl){
    
                        //Getting the ScrollView
                        var sw = pnl.scroller.scrollView;
                        
                        //Updating the vertical scrollbar size
                        sw.indicators.vertical.setSize(pnl.getHeight());
                        
                        //Show the indicators
                        sw.showIndicators();
    
                    }
                }
            });
    
        }
        
    });
    Hope this helps
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  6. #5
    Sencha User
    Join Date
    Aug 2011
    Location
    Germany
    Posts
    21
    Vote Rating
    0
    Answers
    2
    gulsan is on a distinguished road

      0  

    Default


    Thanks a lot, it really does work

  7. #6
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Vote Rating
    23
    Answers
    148
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Quote Originally Posted by gulsan View Post
    Thanks a lot, it really does work
    You are welcome gulsan
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  8. #7
    Sencha User =NR='s Avatar
    Join Date
    Mar 2013
    Location
    Singapore
    Posts
    111
    Vote Rating
    0
    Answers
    2
    =NR= has a little shameless behaviour in the past

      0  

    Default


    How to apply this for ST 2.3 ?
    I noticed that we need to use Ext.define instead of Ext.override but I cannot find replacement of "Ext.util.Scroller.Indicator"

    Regards,

    Quote Originally Posted by AndreaCammarata View Post
    You are welcome gulsan
    I personally don't like your choose to show you the scrollbars all the time, but if you want do that, and you want to show them from the beginning, you can do that like follow:

    Code:
    Ext.regApplication('Sample,', {
        
        launch: function() {
            
            Ext.override(Ext.util.Scroller.Indicator, {
                hide: function() {
                    var me = this;
                    if (this.hideTimer) {
                        clearTimeout(this.hideTimer);
                    }
                    return this;
                }
            });
    
            var viewport = new Ext.Panel({
                fullscreen: true,
                scroll: 'vertical',
                html: 'My Panel',
                listeners: {
                    afterRender: function(pnl){
    
                        //Getting the ScrollView
                        var sw = pnl.scroller.scrollView;
                        
                        //Updating the vertical scrollbar size
                        sw.indicators.vertical.setSize(pnl.getHeight());
                        
                        //Show the indicators
                        sw.showIndicators();
    
                    }
                }
            });
    
        }
        
    });
    Hope this helps

Thread Participants: 2

Tags for this Thread