1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    11
    Vote Rating
    0
    ipops is on a distinguished road

      0  

    Default Unanswered: Scrolling panel bounces back to top after swipe

    Unanswered: Scrolling panel bounces back to top after swipe


    I am trying to create a scrollable panel with lot of items in it (a panel of panels).

    The issue: Not able to scroll even though all the inner panels have been rendered. The scroller always bounces back to offset (0,0)

    Sanity Checks: Did a manual ScrollTo and the panel scrolls correctly. So I am assuming on the right track so far.

    Investigation: Monitored the 'scroll' event. It always seems to bounce back to offset(0,0) after showing a sneak peak of the items below.

    Help needed: If I can do scrollTo programmatically then the touch events should be able to respond accordingly.

    Not sure if I am missing something or is it a bug or an enhancement request.

    Any help is appreciated. Simple app attached to reproduce the issue

    Code:
    Ext.application( {
    	name: 'ScrollingPanel',
    	requires: ['Ext.Panel'],
    	
    	launch: function() {
    			
    		// create a scrollable
    		var panel = Ext.create('Ext.Panel',{
    			height: '80%',
    			width: '80%',
    			top: '10%',
    			left: '10%',
    			style: 'background-color:yellow;',
    			scrollable: true,
    		});
    		Ext.Viewport.add(panel);
    
    
    		// create some items to scroll
    		for(i=0; i < 20; ++i){
    			var top = (i*21) + '%';
    			
    			var item = Ext.create('Ext.Panel', {
    				height: '20%',
    				width:'100%',
    				left: '0%',
    				top: top,
    				style: 'background-color:red;',
    				html: ('Panel: ' + i)
    			});
    			panel.add(item);
    		}
    		
    		THIS ONE WORKS. PANEL SCROLLED CORRECTLY. 
    		The tap event returns the right item
    		panel.getScrollable().getScroller().scrollTo(0, 1000);
    		
    		panel.getScrollable().getScroller().addListener('scroll', this.checkScroll);
    		 						
    		console.log("DONE");	
    	},
    	
    	// THE SCROLL POSITION SHOWS THAT IT ALWAYS BACK TO (0,0)
    	checkScroll: function(scroller, x, y){
    		console.log("scroll: x:%d y:%d", x, y);
    	}
    	
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The scroller doesn't take into account floating items. Something like this will work:

    Code:
    var panel = Ext.create('Ext.Panel',{
        height: '80%',
        width: '80%',
        top: '10%',
        left: '10%',
        style: 'background-color:yellow;',
        scrollable: true
    });
    Ext.Viewport.add(panel);
    
    for(var i=0; i < 20; ++i){
        var top = (i*21) + '%';
    
        var item = Ext.create('Ext.Panel', {
            height: 100,
            width:'100%',
            style: 'background-color:red;',
            html: ('Panel: ' + i)
        });
        panel.add(item);
    }
    
    panel.getScrollable().getScroller().scrollTo(0, 1000);
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    11
    Vote Rating
    0
    ipops is on a distinguished road

      0  

    Default maybe its a feature request

    maybe its a feature request


    Thanks and yes no issues scrolling non floating panesl. Trying to avoid pixels in my app though and maybe you can mark this as a feature request. I am sure your team can accomodate since ScrollTo works fine with floating items.

Thread Participants: 1

Tags for this Thread