PDA

View Full Version : Carousel with no drag,scroll?



scaron
2 Dec 2010, 8:02 AM
Hi,

I've made an application who contain a carousel with 3 cards for which I can navigate to each other by selecting an item in the current display card. I just want to disable the way that the user can scroll or drag the carousel to access another card. I try to put the property "draggable" and "scroll" to false in the carousel but it didn't work.

Do you have any other idea to make it possible ?

Thanks for your help,
Sebastien

nerdbert
2 Dec 2010, 10:14 AM
I think you can use a panel with layout:card instead of a carousel in this case. To switch the cards you can call yourCardPanel.setActiveItem(index).

scaron
2 Dec 2010, 11:38 AM
Good idea but it didn't work for me at this time, I try to fix this.

scaron
2 Dec 2010, 1:05 PM
I have a problem with this following code:



CategorieList = new Ext.List({
fullscreen:true,
store:StoreCategories,
tpl:CategorieTemplate,
itemSelector:"div.categorie",
listeners:{
itemtap:function(list,index){
var SelectionCategorie = list.store.getAt(index);
var NumeroCategorie = SelectionCategorie.get("ClassID");

StoreMembres.load({params:{categorie:NumeroCategorie}});

/*alert(NumeroCategorie);*/

StoreMembres.on("load",function(){
alert("1");
CategoriePanel.setActiveItem(1);
})
}
}
})

CategoriePanel = new Ext.Panel({
fullscreen:true,
layout:"card",
cardSwitchAnimation:"slide",
activeItem:0,
items:[CategorieList,CategorieMembreList,CategorieDetailList]
})


It didn't enter the "onload" function and as I saw in firebug the store load properly so I don't understand the problem with that thing. The code to change the CategoriePanel card didn't work too. It's kind of weird no?

Thanks,
Sebastien

lordmitchnz
6 Jan 2011, 5:33 PM
You can still use a carousel if you prefer, for some reason "scroll:false" requires the direction to be specified as well.
Here is a carousel with no way of navigating to the other cards (you can add buttons to navigate etc).
However there are better ways to do this than a carousel.


var carousel1 = new Ext.Carousel({
ui: 'dark',
scroll: 'false',
direction: 'vertical',
indicator: false,
defaults: {
cls: 'card'
},
items: [{
cls: 'welcomeScreen',
items: [{
html: '<h1>Carousel</h1><p>Navigate the two carousels on this page by swiping left/right or clicking on one side of the circle indicators below.</p>',
},
]
},
{
id: 'tab2',
title: 'Tab 2',
html: '2'
},
{
title: 'Tab 3',
html: '3'
}]
});

Old McStopher
6 Jul 2011, 12:29 PM
@lordmitchnz:
Actually, it turned out for me that no direction needed to be specified. I see that you omitted single quotes around
scroll: false in your reply text, but not in the code. Setting scroll: to false only worked for me without the quotes, whereas "vertical" and "horizontal" require either single or double quotes.