Carousel navigation question

[rafaelberrocalj]

in examples 'sencha-touch-beta-0.90/examples/carousel/index.html'

if we have


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// Create a Carousel of Items
/*var carousel1 = new Ext.Carousel({
defaults: { cls: 'card' },
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>'
}, {
title: 'Tab 2',
html: '2'
}, {
title: 'Tab 3',
html: '3'
}]
});*/

var items = [];

for (var i = 0; i < 50; i++) {
items[items.length] = {
title: 'Tab ' + i,
html: 'test number ' + (i + 1)
};
};

var carousel2 = new Ext.Carousel({
ui: 'light',
defaults: { cls: 'card' },
items: [items]
});

new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [/*carousel1,*/ carousel2]
});
}
});


and i want to jump from 'tab 1' to 'tab 10' how can we do it?

[Jamie Avins]

You can change to any card you want to with the setActiveItem method. (http://localhost/touch/docs/?class=Ext.Carousel)

[rafaelberrocalj]

i didnt understood if what you have said is what i want to do.

here: in the bottom of the page we have 50 little balls, which they are changing color when i drag the mouse.
the question is: can i from tab 1 to 10 by clicking on the 10º little ball? (like extjs, does is have a listeners click or something else - i have looked at the docs and i did not found or did not know how to search this listener)

[Jamie Avins]

We're surely having a language issue here. Listeners are similar across the libraries, with the exception that you are dealing with touch type event instead of mouse events, and multitouch gestures as well.

[TommyMaintz]

Rafael,

The little indicators are not individual 'tabs'. If you want that type of behavior you should use the TabPanel and style your Tabs differently.
Please keep in mind your users are on a touchscreen so it is near impossible for them to touch one of those individual dots. If you tap on the left or right of the dots you can browse left and right. Thats about as precise as someone can be with a finger on a touchscreen.

[rafaelberrocalj]

yes sure, but it's possible to do that in touch?
like we can do on click event?

if yes then how can i emulate that? my_object.on('touch', myFn); something like that or nothing to do with it?

[TommyMaintz]

You can open the source code for some of these components to see how we manage to make all this magic work. Here is a quick example of binding a listener to an element.


anElement.on('tap', function(e, t) {
alert('You tapped on the following element: ' + t.id);
});

[rafaelberrocalj]

okay, it's like extjs, thats what i have imagined.

but you said the it should be impossible the client 'tap' the dots do change from 1 to 10.
so i think the dots dont have a listeners for a tab event right? so if i want to do that i may have to override some codes corret?

or it is impossible?

[TommyMaintz]

It is defintelaty possible. Either you bind your own tap listeners on the actual dots or you extend the Ext.Carousel.Indicator class and add your own functionality. You can find it in the Carousel.JS file in the SDK.