Addlistener in a carousel

[Pablo Cabana]

Hi, first of all CONGRATULATIONS for Sencha Touch. It sounds VERY promising.

I am not used to javascript and I am trying to learn it with the sencha API.

My first attempt is to develop an iphone version of my company´s website: www.cabanacriacao.com

So I put a carousel to work with some images. Very fast with sencha! Very cool!
But now I want to let the user doubletap each image to flip it and see its back, where I will show some information about the image, like I did in the Flash version of my website.

I am all day here and til now I could not figure out how to put the images to listen to the doubletap event!

I am doing like this:

var frame1 = new Ext.Panel({
id: 'frame1',
autoScroll: false,
items: [{html: '<div id="front"><img src="frames/pt/servicos.jpg" width="480" height="208" /></div>'}, {html: '<div id="back"><img src="frames/pt/fiori.jpg" width="480" height="208" /></div>'}],
layout: 'fit',
});

And them frame2, frame3, etc.

So I want to show to "front" of the frame first and after doubletap, show the "back" with a nice flip effect.

The carousel is like this:

var carousel1 = new Ext.Carousel({
ui: 'light',
defaults: { cls: 'card' },
items: [
frame1,
frame2,
frame3,
..... etc

The carousel is working very nice, with the "back" part hidden perfectly. But please, give me a tip about how I can achieve the desired effect.
I´ve already tried a lot of ways. I´ve read all sencha touch threats on this forum, searched a lot in the documentation...

[nony]

Hello

Sencha actually have a really effective

I am trying to do exactly the same thing, very simple to do with jqtouch, but not so simple with sencha.

merci et bonne journée

[mrsunshine]

Hi, first of all CONGRATULATIONS for Sencha Touch. It sounds VERY promising.

I am not used to javascript and I am trying to learn it with the sencha API.

My first attempt is to develop an iphone version of my company´s website: www.cabanacriacao.com

So I put a carousel to work with some images. Very fast with sencha! Very cool!
But now I want to let the user doubletap each image to flip it and see its back, where I will show some information about the image, like I did in the Flash version of my website.

I am all day here and til now I could not figure out how to put the images to listen to the doubletap event!


take look to the source of my memory like remember the card app:
http://www.sencha.com/forum/showthread.php?101815-Memory

there i flip cards on touch event. basic its a panel with to items with card layout on touch .setCard(1,'flip')

this is the relevant class. images are administer as background images with css.

Memory.Ui.Card = Ext.extend(Ext.Panel, {

initComponent: function() {
var config = {
layout: 'card',
cls: 'card',
flex: 1,
activeItem: 0,
items: [
{
cls: 'cover'
},
{
cls: this.initialConfig.className
}
]
};
Ext.apply(this, config, Ext.apply(this, this.initialConfig));
Memory.Ui.Card.superclass.initComponent.call(this);

this.on('afterrender', this.onAfterrenderAction, this);
},

/**
* on after render
*/
onAfterrenderAction: function() {
this.addTabEventListener();
},

/**
* add event listenr
*/
addTabEventListener: function() {
this.mon(
this.el,
{
tap: this.onTab,
scope: this
}
);
},

/**
* remove tab event listener
*/
removeTabEventListener: function() {
this.mun(
this.el,
{
tap: this.onTab,
scope: this
}
);
},

/**
* On tab flip the card
*/
onTab: function(){
Memory.fireEvent('openCard', this);
this.setCard(1,'flip');
}
});

Ext.reg('Memory.Ui.Card', Memory.Ui.Card);
hope this helps

[Pablo Cabana]

Thank you very much, mrsunshine.
I will try it and post the results.

[nony]

hello pablo, I found that : http://line25.com/articles/super-cool-css-flip-effect-with-webkit-animation