Results 1 to 3 of 3

Thread: Dataview not scrolling back to top or to the left

  1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    22
    Vote Rating
    0
      0  

    Default Dataview not scrolling back to top or to the left

    Greetings!

    I'm currently creating a component that gets a different layout in landscape and portrait mode.
    It's a dataview that scrolls horizontally when in landscape mode, but vertical in portrait mode.

    code:

    Code:
    Ext.define('Tijdschrift.util.HorizontalSlider', {
       extend: 'Ext.DataView',
        xtype: 'horizontalslider',
        config: {
             scrollable: 'horizontal',
            
    		 inline: {
             	wrap: false
             },
    		//set the itemtpl to show the fields for the store
            itemTpl: new Ext.XTemplate(
            		'<div class="listItem">' +
            			'<div class="thumbnail">' +
            				'<img src="{thumbnail}">' +
            			'</div>'+
            			'<div class="horizontal_category_name">' +
            			'<span class="whiteBlueButton">{name}</span>' +
            			'</div>' +
            		'</div>'),
           listeners : {
    		    painted : function (cmp, eOpts)
    		    {
    		    	this.changeOrientationSettings(Ext.Viewport.getOrientation());
    		    }
           }
        },
        
        changeLayout : function(layoutMode)
        {
        	console.log("mode : " + layoutMode);
        	this.hide();
        	this.changeOrientationSettings(layoutMode);
        	this.show();
        },
        changeOrientationSettings : function (layoutMode)
        {
        	if(layoutMode == "portrait")
        	{	
        		this.setHeight(460);
        		this.setInline(true);
        		this.setScrollable("vertical");
        	}
        		
        	else
        	{
        		this.setHeight(205);
        		this.setInline({wrap:false});
        		this.setScrollable("horizontal");
        	}
        	Tijdschrift.util.Utils.Trace(this.scrollable);
        }
    });
    Now, here's what happens:

    If you don't scroll in portrait / landscape, it gets rendered just fine on orientation change. Yaah!
    But:

    1) if you are in portrait mode and you scroll the list all the way down (so you can see the last items) and rotate to landscape, the list appears to be empty. But it's not. It's just out of sight. I can scroll horizontally , that's good, but I need to find a way to reset the position of scroller.

    2) same for going from landscape to portrait.

    So: I need to find a way to reset my scroller, it think.

    I've tried scrollto, moveto, this.scrollable.getScroller(). setting x:0,y:0 but nothing seems to work.


    Any help would be much appreciated!

    Sencha on!

    M.

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Answers
    3931
    Vote Rating
    1271
      0  

    Default

    So in your changeOrientationSettings method at the beginning if you do:

    Code:
    this.getScrollable().getScroller().scrollTo(0, 0, false);
    It won't "reset" the scroll position? Did you try without the this.hide() and this.show()?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Jun 2012
    Posts
    22
    Vote Rating
    0
      0  

    Default

    No, didn't remove the hide and show functions...
    stepped back from the scrollTo() function and just destroyed the component and build it again when changing mode...Seems to work fine.
    But will look into this none the less.

Tags for this Thread

Posting Permissions

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