PDA

View Full Version : Switch card with Href Link



boulledogue
16 Jun 2011, 2:36 PM
Hi All!
I have got a question... My Sencha-touch Carousel works fine, but I would like to switch cards by dragging AND with two buttons (Prev & Next).
I've got different items in my Carousel, that have title&html.
How can I do to make a button in my Html code that allow to switch prev&next?

var carousel1 = new Ext.Carousel({
height:100,
defaults: {
cls: 'card'
},

items: [{
title: 'Tab 1', html: '<div><a ontouchstart="appear(\'jeu.html?pays=france\');"><img src="images/pays/france.png" width="150" style="margin-top:55px;"></a><h1>France</h1><a onclick="???????????????????????">NEXT</a> '
}, ......

Thank you !!!
Boulledogue
Sorry for my poor english

bclinton
16 Jun 2011, 3:44 PM
You could attach an event to an element in your html, or you could give your carousel an id and use Ext.getCmp to get a reference to it.

If you don't need the button to be in the html of the card itself, an easier way to do this might be to dock a toolbar in your carousel with a "next" button in it.

boulledogue
17 Jun 2011, 12:39 AM
Thank you for answering! :)
But for me it's like chineese language :D How can i attach an event to my element? document.getelementbyid().onclick?
Do you have some code example for me? I ve seen the kitchen sink but it's quite difficult :/
Ty!
Boulledogue

Edit: How can i change my Carousels' activeItem? using carousel1.activeItem=5; does not work :(

Edit2 : Ty! I used Ext.Cmp like this:
Ext.getCmp('carousel').setActiveItem(1, 'slide');
and it works fine now! TY!

hemant1
17 Jun 2011, 1:24 AM
var carousel1 = new Ext.Carousel({
height:100,
defaults: {
cls: 'card'
},

items: [{
title: 'Tab 1', html: '<div><a ontouchstart="appear(\'jeu.html?pays=france\');"><img src="images/pays/france.png" width="150" style="margin-top:55px;"></a><h1>France</h1><a onclick="???????????????????????">NEXT</a> '
}, ......
dockedItems:[{
xtype: 'toolbar',
dock: 'top',
items: [{
text:'Next',
ui:'Forward,
handler:function()
{.....}
},{
text:'Previous'
ui:'back',
handler:function()
{....}
}]
}]

hemant1
17 Jun 2011, 1:29 AM
how can i assign a new css class to each carousel card?