PDA

View Full Version : Flip animation



gwthompson
30 Jul 2010, 6:16 AM
Hi,

Please excuse me if this is a simple and obvious question but I can't seem to find the correct solution. I want to flip an image to display the back which is just another image underneath the top one just like the card flip demo on Apple's Safari dev site.

Is there a way to do this in Sencha Touch?

Thanks,
gt

inevs
30 Jul 2010, 10:26 AM
Just try this:





var flipper = new Ext.Panel ({
fullscreen: true,
layout: 'card',
items: [{
xtype: 'panel',
html: '<img src="frontsideimge.png"/>',
listeners: {
afterrender: function() {
this.getEl().on ({
click: flipCard
})
}
}
},{
xtype: 'panel',
html: '<img src="backsideimg.png"/>',
listeners: {
afterrender: function() {
this.getEl().on ({
click: flipCard
})
}
}
}],
activeItem: 0
});

var flipCard = function() {
flipper.getLayout().next('flip', true);
};