PDA

View Full Version : Keeping track of Carousel pages



ssdesign
30 Jun 2010, 1:05 AM
I am moving the Carousel pages using two buttons in the toolbar.
While doing that, I am keeping a page count.

Now my problem is, if I move pages using gesture, I am not able to keep track of the pages.
I would like to know how can I tell my javascript when a page has been changed using gesture.

Is this possible?

ssdesign
30 Jun 2010, 7:25 AM
Once again answering myself :)

'cardswitch' event did the job.

I must say the API is well documented, although it would help to have some examples in it.
Keep up the good work guys, we are with you :)

TommyMaintz
30 Jun 2010, 9:40 AM
Thanks. Just wanted to tell you that in the new release the Carousel has been refactored and improved drastically. The cardswitch event is still there so your code should still work.

p.s. Please keep answering your own questions ;)

quarkus
8 Jul 2010, 4:55 AM
hello folks...
Maybe a stupid question but i am new to Ext and Sencha ... cann you please tell me how to implement the listener?


car.on('cardswitch', onCardSwitch);
function onCardSwitch(c){
console.log('lalala: '+c);
}


can't get it to work ...

thanks in advance
quarkus

evant
8 Jul 2010, 4:59 AM
Try:



car.on('cardswitch', function(){
console.log('foo');
});

quarkus
8 Jul 2010, 5:08 AM
hmmm ... does not work either ...

i am doing all my stuff in the Ext.setup() method.



Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {

var videoRight = new Ext.Video(/*params*/);

var videoLeft = new Ext.Video({/*params*/});


var car = new Ext.Panel({
cls: 'cards',
fullscreen: true,
layout: {
type: 'vbox',
align: 'left'
},
defaults: {
activeItem:1,
flex: 1
// indicator:false
},
items: [{
xtype: 'carousel',
items: [
videoLeft
,
{
id:'center',
cls: 'cards card2'
},
videoRight
]
}],

listeners:{
afterrender:function(c){
console.log('active is: '+c.activeSlide);
}
}
});
car.on('cardswitch', function(){
console.log('foo');
});
}
});


thanks for the quick reply !

btw. am using version:"0.9.1"

quarkus

evant
8 Jul 2010, 5:17 AM
Because "car" doesn't have a layout of type card, so it never fires the cardswitch.

quarkus
8 Jul 2010, 5:23 AM
ok ... that makes sense ...
changed my layout to this:


layout: {
type: 'card'
}


anything else ? cause it is still not working ... dunno what i messed up again.

thanks

TommyMaintz
13 Jul 2010, 10:28 AM
You have only put 1 card in your car panel, so it will never switch. If you want to listen to the cardswitch event, you have to add the listener to the Carousel.

quarkus
13 Jul 2010, 10:50 AM
jep ....
found the solution but forgot to post the code.

first thing tomorrow.

thanks a lot.

quarkus
14 Jul 2010, 12:33 AM
This did the job :


carousel = new Ext.Carousel({
fullscreen:true,
activeItem:1,
items: [
{id:'left', cls: 'cards card1'},
{id:'center', cls: 'cards card2'},
{id:'right', cls: 'cards card3'}
]
});
carousel.setSize(1024,768);
//
carousel.on('cardswitch', function(){
console.log('do the switch, baby');
}});


the problem was that the example was a bit more convoluted and i couldnĀ“t get it working.

cheers
quarkus