[FIXED] Scrolling and Swiping a Carousel Card doesn't behave like it did in V1.1 [Archive]

rockinthesixstring

24 Oct 2011, 10:52 AM

I'm working on rewriting a V1.1 app into a V2 app, and I've come up against an inconsistency that is kind of annoying.

REQUIRED INFORMATION

Ext version tested:

Sencha Touch 2.0PR1

Browser versions tested against:

Google Chrome (Mac OS X)
Safari (Mac OS X)

DOCTYPE tested against:

<!DOCTYPE html>

Description:

The video describes it best. Please forgive the lack of audio... it's there in my screen recording, but the youtube processing must have lost the sound.
http://www.youtube.com/watch?v=SOthsYz09B8

Steps to reproduce the problem:

use test case below

The result that was expected:

horizontal swipe will lock vertical scroll axis
vertical scrolling will lock horizontal swipe axis

The result that occurs instead:

scrolling and swiping both happen causing a free float of the card

Test Case:

Here's a complete working example.

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://cdn.sencha.io/touch/sencha-touch-2.0.0-pr1/sencha-touch-all-debug-w-comments.js"></script>

<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/touch/sencha-touch-2.0.0-pr1/resources/css/sencha-touch.css" />

<style>
.rpc-outerPanelWrapper{
padding: 5px;
}
</style>

<script type="text/javascript">
Ext.Loader.setConfig({ enabled: true });

// Initialize App
Ext.application({

name: 'rpc',
appFolder: 'app',
controllers: ['bible'], //note: define controllers here
launch: function () {

console.log('Ext.application ~ launch'),
Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'bottom',
items: [{
title: 'Bible Reading',
iconCls: 'bookmark',
xtype: 'bible-indexView'
}]
});
},
initialize: function() {
console.log('Ext.application ~ initialize');
this.callParent();
}
});

// Chapter a day Partial View
Ext.define('rpc.view.bible._chapterADayView', {
extend: 'Ext.Panel',
alias: 'widget.bible-_chapterADayView',
config: {
scrollable: true,
items: [{
xtype: 'container',
cls: 'rpc-outerPanelWrapper',
items: [{
html: '<div class="x-icon-swipe x-icon-swipe-left"></div><i>Swipe for Bible in a Year</i>'
}]
}]
},
initialize: function() {
console.log('rpc.view.bible._chapterADayView ~ initialize');
this.callParent();
}
});

// In a year partial view
Ext.define('rpc.view.bible._bibleInAYearView', {
extend: 'Ext.Panel',
alias: 'widget.bible-_bibleInAYearView',
config: {
scrollable: true,
items: [{
xtype: 'panel',
cls: 'rpc-outerPanelWrapper',
items: [{
html: '<span style="float:right;"><i>Swipe for Chapter a Day</i><div class="x-icon-swipe x-icon-swipe-right"></div></span>'
}]
}]
},
initialize: function() {
console.log('rpc.view.bible._bibleInAYearView ~ initialize');
this.callParent();
}
});

// Index View
Ext.define('rpc.view.bible.indexView', {
extend: 'Ext.Carousel',
alias: 'widget.bible-indexView',
config: {
items: [{
xtype: 'toolbar',
title: 'Bible Reading Plan',
docked: 'top'
}, {
xtype: 'bible-_chapterADayView'
}, {
xtype: 'bible-_bibleInAYearView'
}]
},
initialize: function() {
console.log('rpc.view.bible.indexView ~ initialize');
this.callParent();
}
});

// Bible Controller
Ext.define('rpc.controller.bible', {
extend: 'Ext.app.Controller',
views: ['bible.indexView'],

init: function () {
console.log('rpc.controller.bible ~ init');
}
});
</script>
</head>
<body>
</body>
</html>

Does anyone know of a fix or a workaround for this?

rockinthesixstring

27 Oct 2011, 12:08 PM

Is there a fix/workaround for this? I really don't want to have to go back to V1.1 for this small issue.

Jamie Avins

31 Oct 2011, 12:15 PM

Carousel isn't 100% complete yet, and we are aware of this unimplemented feature. We will have it addressed soon.

AntoVXR

18 Nov 2011, 6:39 AM

Carousel isn't 100% complete yet, and we are aware of this unimplemented feature. We will have it addressed soon.

When do you think you'll release an update to this? As i'm having the same bug

Thanks
Anto

Jamie Avins

18 Nov 2011, 9:09 AM

Very soon.

benjacobi

26 Dec 2011, 12:07 PM

Has this issue been resolved? It looks like it was closed, but I don't see a resolution, & I'm having the same problem.

The scroll behavior I'm getting is exactly as @rockinthesixstring originally indicated. My carousel is embedded in a panel, so trying to swipe through the carousel causes the panel it's embedded in to scroll vertically (if & when it picks up a vertical swipe input). This is pretty frustrating behavior as the whole page is moving about while you're just trying to swipe through the carousel.

Any update to this issue would be greatly appreciated. :)

Ext version tested:

Sencha Touch 2.0PR3
Browser versions tested against:

Google Chrome 16.0.912.63 (Mac OS X)
iOS Safari (iOS v5.0)
iOS Simulator (v5)
DOCTYPE tested against:

<!DOCTYPE html>

benjacobi

26 Dec 2011, 12:31 PM

Test Case:

app.js:

App = new Ext.application({ name: "application",

launch: function() {
Ext.create('Ext.Panel', {
scrollable: true,
fullscreen: true,
items: [
{
html: '<p>Lorem ipsum dolor...</p>' +
'<br/><br/><br/><br/><br/><br/>' +
'<p>...</p>'
},
{
xtype: 'carousel',
width: '100%',
height: '320px',
mask: {
html: 'Pictures'
},

items: [
{
style: 'background-color: #8C8C8C;'
},
{
style: 'background-color: #8C8C8C;'
},
{
style: 'background-color: #8C8C8C;'
},
{
style: 'background-color: #8C8C8C;'
}
]
}
]
});
}
});

index.html:

<!DOCTYPE html><html>
<head>
<title>Nested List</title>

<link rel="stylesheet" href="resources/css/apple.css" type="text/css">

<script type="text/javascript" src="sencha-touch-all.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

Again, this is using the apple.css & sencha-touch-all.js from the sencha-touch-2-pr3 package.

Thanks for any help anyone can offer!

alexwebb2

28 Dec 2011, 6:49 AM

I've seen the same weird scrolling behavior when using a carousel full of lists (i.e., each panel in the horizontally scrollable carousel contains a vertically scrollable list).

This may sound like a minor annoyance, but it's actually one of the first things a user will notice that's "off" about an app, and that's a significant problem.

Jamie Avins

3 Jan 2012, 9:24 AM

Looks like this was never opened properly. I've gone ahead and done that now so we can take a proper look at the issue.

Jacky Nguyen

18 Jan 2012, 5:27 PM

As of PR3, Carousel and Scroller both have a 'directionLock' config. When being set to 'true', events will be locked to the direction that the components are interested in. For example:

Horizontal Carousel inside a vertically scrollable Container:

{
scrollable: {
direction: 'vertical',
},
items: [
{
...
},
{
xtype: 'carousel',
direction: 'horizontal',
directionLock: true,
items: [
// ...
]
}
]
};

Horizontally scrollable Container inside a vertically scrollable Container:

{
scrollable: {
direction: 'vertical'
},
items: [
{
//...
scrollable: {
direction: 'horizontal',
directionLock: true
},
items: [
// ...
]
}
]
}

Or nested Carousels in both directions (checkout the new Carousel example (http://dev.sencha.com/deploy/sencha-touch-2-pr3/examples/carousel/))

atik.kazi

16 Feb 2012, 10:51 PM

I can still see this problem. Especially when we swipe carousel (with vertically scrollable list in it) horizontally, we can see scroll bar of the list appear and also list scrolling vertically. Ideally vertical scrolling of the list should be locked when I swipe carousel horizontally. I tested this with pr3. ANy fix for this in latest releases ?

Jamie Avins

17 Feb 2012, 8:29 AM

I can still see this problem. Especially when we swipe carousel (with vertically scrollable list in it) horizontally, we can see scroll bar of the list appear and also list scrolling vertically. Ideally vertical scrolling of the list should be locked when I swipe carousel horizontally. I tested this with pr3. ANy fix for this in latest releases ?

As this issue is fixed for most people I think it's best if you can provide a full test case in a new thread and we'll be happy to look at it.