PDA

View Full Version : Prevent Swipe on Carousel



achapman
6 Jul 2010, 11:09 AM
Does anyone know if it is possible to keep the user from swiping the carousel to go from one card to another? I have set draggable to false and that doesn't do it.

achapman
6 Jul 2010, 12:35 PM
I did some digging in the source code and it looks like the carousel was not designed to have this functionality.

TommyMaintz
6 Jul 2010, 1:41 PM
Why would you want to prevent the user to navigate the Carousel? If thats the case you could skip using a carousel at all, and just use a Container with a card layout. You can programmatically change the card using setCard whenever you want.

eterps
7 Jul 2010, 2:06 AM
> Why would you want to prevent the user to navigate the Carousel?

I can imagine you would want to prevent navigating to the next Carousel item temporarily.
Some native iPhone apps have Carousel like functionality where a user can pinch-zoom in on one of its items, pan around, pinch-zoom out to 1:1 level again and resume swiping the Carousel to its next item.
In fact I want to implement such behaviour in my Sencha app, although I am also in the process of learning Sencha/Ext itself.

achapman
7 Jul 2010, 4:03 AM
Why would you want to prevent the user to navigate the Carousel? If thats the case you could skip using a carousel at all, and just use a Container with a card layout. You can programmatically change the card using setCard whenever you want.

That is essentially the idea I was going for. Can you point me to a simple example showing how to do this?

Here is what I am trying to accomplish.

I have a panel with a form, a panel with a carousel, and a panel to display a graph. The form when submitted grabs the data from a select and dynamically builds three or more cards that are added to the carousel and then displays the panel containing the carousel. Each card of the carousel has a graph button that when clicked builds a graph (through Google) of the data in the table on the current card and displays the graph panel.

The problem I am now having is that to dynamically build the carousel I call removeAll, add my cards with data, and then doLayout and setCard(x) (to overcome the indicator issue when dynamically adding cards). When my main panel is set to layout 'card', the carousel gives me an error saying that there is no method 'setCard()', but if my main panel is set up as a carousel itself, everything works well except for the user being able to swipe in the main panel.

I hope that all makes sense.

achapman
7 Jul 2010, 7:13 AM
Ok, it looks like it is an issue with dynamically building the carousel content.

Here is a simplified version of the code that builds the carousel.



var getData = function() {
Ext.getCmp('carousel1').removeAll(true);
Ext.getCmp('carousel1').add(new Ext.Panel({id: 'card1', title: 'Card 1',scroll: 'vertical', layout: {type:'vbox'}}));
Ext.getCmp('carousel1').add(new Ext.Panel({id: 'card2', title: 'Card 2',scroll: 'vertical', layout: {type:'vbox'}}));
Ext.getCmp('carousel1').add(new Ext.Panel({id: 'card3', title: 'Card 3',scroll: 'vertical', layout: {type:'vbox'}}));

Ext.getCmp('card1').add(Ext.getCmp('button2'));
Ext.getCmp('card2').add(Ext.getCmp('button3'));
Ext.getCmp('card3').add(Ext.getCmp('button4'));

Ext.getCmp('carousel1').doLayout();
Ext.getCmp('carousel1').setCard(0);
Ext.getCmp('mainNav').setCard(1);
};


If I don't build dynamically, and place the carousel in a panel with a card layout, it works fine. But when I build the carousel like in the code above and place it in a panel with a card layout, I get an error saying that the carousel doesn't have a method setCard().

Like I metioned before, though, if the main navigation panel is a carousel instead, then the 'child carousel' works and doesn't give me any errors.

evant
7 Jul 2010, 7:23 AM
Please try and post drop in test cases. It's difficult to diagnose issues if you only show portions of your code.

achapman
7 Jul 2010, 7:37 AM
I attached the whole test project. There are two mainNavs, the one that works and the one that doesn't so that you can see what is happeneing.

This test isn't setup to get to the graph panel even though it is there. I was only worried about testing the carousel.

TommyMaintz
7 Jul 2010, 10:15 AM
Ok, I see what you are trying to do now. I will look into a way to support temporarily disabling the swiping on a Carousel. For now you would have to go to the source code of Carousel, and see if you can find a "hack" that you can apply to achieve this.

achapman
7 Jul 2010, 10:36 AM
Should it work the way you suggested, by using a container with the layout as card? I really don't see why that wouldn't work. If I create the cards and add them to the carousel when rendering everything, it works, it just seems to bomb when I try to use a dynamically generated carousel.

lachi
31 Aug 2010, 11:35 PM
my solution to prevent swipe:


MyCarousel = Ext.extend(Ext.Carousel, {
...
afterRender: function() {
MyCarousel.superclass.afterRender.call(this);
this.mon(this.el,{
touchstart: function(ev) {
var t = ev.getTarget('.noscroll-class');
if (t) {
this.preventScroll = true;
} else {
this.preventScroll = false;
}
},
scope: this
}
},
onScroll: function(e) {
if (this.preventScroll) return;
MyCarousel.superclass.onScroll.call(this,e);
},
onScrollEnd: function(e, t) {
if (this.preventScroll) return;
MyCarousel.superclass.onScrollEnd.call(this,e,t);
}
...
});