Scroll memory on Carousel?

[omulriain]

I want to have vertically panels in a carousel. Think group example timeline, but several of them in a carousel. I have the cards vertically scrollable and that is working, they even remember their scroll positions without any additional configuration. What would be the code to add a listener to the cardswitch event that gets the old card scroll position and applies it the new one?

This seams like a five minute code exercise for a guru which I am not.

I declared the following function:
var preserveScroll = function(container, newCard, oldCard, index, animated){
var offset = Ext.util.Scroller.getOffset(oldCard);
allert(offset.toString());
newCard.scroll(offset);

};

and registered it by:

var tableCarousel = new Ext.Carousel({
iconCls: 'bookmarks',
cls: 'card card2',
title: 'Guide',
ui: 'light',
monitorOrientation: 'true',
listeners: {orientationchange: function() {someCustomFunction(false);}
,cardswitch: function(){preserveScroll(this);}
}
,items: [timeline1,timeline2,timeline3]

});

but get the following error:

Uncaught TypeError: Object function (el, config) {
el = Ext.get(el);

var me = this,
scroller = Ext.ScrollManager.get(el.id);
if (scroller) {
return Ext.apply(scroller, config);
}

config = config || {};
Ext.apply(me, config);

me.addEvents(

'scrollstart',

'scrollend',

'scroll'
);

Ext.util.Scroller.superclass.constructor.call(me);

scroller = me.scroller = this.el = el;
this.id = el.id;

Ext.ScrollManager.register(this);

scroller.addClass('x-scroller');
me.parent = scroller.parent();
me.parent.addClass('x-scroller-parent');

me.offset = {x: 0, y: 0};
me.omega = 1 - (me.friction / 10);



var eventTarget = me.eventTarget ? Ext.get(me.eventTarget) : me.parent;
eventTarget.on({
touchstart: me.onTouchStart,
scrollstart: me.onScrollStart,
scroll: me.onScroll,
scrollend: me.onScrollEnd,
horizontal: me.horizontal,
vertical: me.vertical,
scope: me
});

if (me.bounces !== false) {
var both = me.bounces === 'both' || me.bounces === true,
horizontal = both || me.bounces === 'horizontal',
vertical = both || me.bounces === 'vertical';

me.bounces = {
horizontal: horizontal,
vertical: vertical
};
}

if (me.scrollbars) {
if (me.horizontal) {
me.scrollbarX = new Ext.util.Scroller.Scrollbar(me, 'horizontal');
}

if (me.vertical) {
me.scrollbarY = new Ext.util.Scroller.Scrollbar(me, 'vertical');
}
}

me.scroller.on({
'webkitTransitionEnd': me.onTransitionEnd,
scope: me
});
} has no method 'getOffset'
preserveScrolltest.js:131
tableCarousel.Ext.Carousel.listeners.cardswitchindex.js:365
fireext-touch-debug.js:940
fireEventext-touch-debug.js:569
onCardSwitchext-touch-debug.js:16349
onCardSwitchext-touch-debug.js:19144
onTransitionEndext-touch-debug.js:19135
anonymous:5
(anonymous function)ext-touch-debug.js:3253

[omulriain]

The cards scroll to the position desired but only if a scroll is started on the new active card. Is there another listener or something I can utilize to make the card adjust its y offset value without having to physically scroll on the window?

carousel:


var tableCarousel = new Ext.Carousel({
iconCls: 'bookmarks',
cls: 'card card2',
title: 'cards',
ui: 'light',
monitorOrientation: 'true',
listeners: {
cardswitch: function(container, newCard, oldCard){
preserveScroll(container, newCard, oldCard);
this.doLayout();}
}
,items: [timeline1,timeline2,timeline3]

});



function:


var preserveScroll = function(container, newCard, oldCard){
newCard.scroller.offset = oldCard.scroller.offset;
};