PDA

View Full Version : Simple navigation between cards inside a carousel



miroamarillo
6 Jun 2011, 1:19 PM
I'm really new to Sencha Touch and even to JavaScript but I have been working a lot to make it work. I have a question of simple navigation.

Case: I have a carousel with 10 cards. Inside the first card of the carousel I want to have a button that takes directly to the end of the carousel. I kind of used the same code that was posted in another post because, If the solution works with this, It would work with the idea I have and probably will help a lot of people.

Until now, I have a button that loads a google page inside the app but I want this button to take me to an specific location inside the carousel. In this case the second carousel - Tab 3. Here's the code:



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({
title: 'Tab1',
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: 'Click and go to Carousel 2-Tab 3',
items: [{xtype: 'button', text: 'GO', ui: 'decline', height: '50', width: '50', handler: function() {location.href='http://www.google.com';}}]
}]
});

var carousel2 = new Ext.Carousel({
title: 'Tab2',
direction: 'vertical',
ui: 'light',
activeItem: 1,
defaults: {
cls: 'card'
},
items: [{
title: 'Tab 1',
html: '<h1>ui="light"</h1>'
},
{
title: 'Tab 2',
html: '2'
},
{
title: 'Tab 3',
html: 'Carousel2 Card3'//
}]
});

new Ext.TabPanel({
fullscreen: true,
items: [carousel1, carousel2]
});
}
});

miroamarillo
7 Jun 2011, 4:13 AM
I kind of resolved the problem with two carousels. The button now can control the carousel in the bottom part. The only thing is that the animation is not consequent with the orientation. It always makes the same slide right to left animation independent of the position of the card. I think this example works for now. Hope this helps any new soul getting into Sencha Touch. In my case it took me a while to figure it out. Not a programmer, more like Front-End. Anyway, here is the code:



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({
direction: 'horizontal',
activeItem: 2,
items: [
{
html: '<p>Navigate the carousel on this page by swiping left/right.</p>',
cls : 'card card1'
},
{
html: '<p>Clicking on either side of the indicators below</p>',
cls : 'card card2'
},
{
html: 'Card #3',
cls : 'card card3',
items: [{xtype: 'button',
text: 'GO',
ui: 'decline',
height: '50',
width: '50',
handler: function() {carousel2.setActiveItem(2, 'slide');}}]
}
]
});

var carousel2 = new Ext.Carousel({
direction: 'horizontal',
activeItem: 0,
items: [
{
html: '<p>Navigate the carousel on this page by swiping left/right.</p>',
cls : 'card card1'
},
{
html: '<p>Clicking on either side of the indicators below</p>',
cls : 'card card2'
},
{
html: 'Card #3',
cls : 'card card3'
}
]
});

new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'},
defaults: {flex: 1},

items: [carousel1, carousel2]
});



}
});



Hopefully next time the Dev team can solve this dumm questions on time. :)