PDA

View Full Version : Simple Card Transitions



rformanek
6 Dec 2010, 2:10 PM
Hi everyone,

I've been reading the Sencha Touch docs for some time but one basic functionality still alludes me: card transitions.

I want users to be able to click a customized button/element in the HTML that will transition to a certain card.

Any help is appreciated!

mrsunshine
6 Dec 2010, 2:47 PM
You can for example call the setActiveItem() method of your panel an pass the the animation type as second param


Ext.setup({
onReady: function() {
var panel = new Ext.Panel({
layout: 'card',
fullscreen: true,
dockedItems: [
{
xtype: 'toolbar',
docked: 'top',
title: 'test',
items: [
{
xtype: 'button',
text: 'click me',
handler: function(){

panel.setActiveItem(1,'cube');
}

}
]
}
],
items: [
{ html: ' 1', style: 'background: green;'},
{ html: ' 2'},
]

});
}
});

rformanek
6 Dec 2010, 2:57 PM
Thanks for the quick response!

However, is there any ways "buttons" can be located outside of a toolbar or tabpanel?

Basically, I'm simply trying to have an interface where you click an image in a carousel panel, a flip animation is triggered, and the next card is shown.

An alternative would be triggering an overlay when an image is clicked.

I'm pretty sure this boils down to my not understanding a basic concept of the card layout. Any information on how to implement transition animations via "tapping" on images would help a ton.

mrsunshine
6 Dec 2010, 3:19 PM
yeah of course you can add event listener to you image elements which listen to the tap event.

quick very simple example to give you an idea



Ext.setup({
onReady: function() {
var panel = new Ext.Panel({
layout: 'card',
fullscreen: true,

items: [
{ html: '<img src="icon.png" id="test" />', style: 'background: green;'},
{ html: ' 2'},
]


});

var img = Ext.get('test');
img.addListener(
'tap',
function(){
panel.setActiveItem(1,'cube');
}
);
}
});

scH
7 Dec 2010, 7:00 AM
Thank you very much mrsunshine. Ext.get seemed to be the missing piece to our puzzle. (I work with Ryan)

Here's what we ended up with for our little testing file.




Ext.setup({
onReady: function(){

var panel1 = new Ext.Panel({
fullscreen: true,
style: 'background-color: red;',
html: 'Page 1'
});

var panel2a = new Ext.Panel({
fullscreen: true,
style: 'background-color: blue;',
html: '<span id="flip1">Page 2 A</span>'
});

var panel2b = new Ext.Panel({
fullscreen: true,
style: 'background-color: green;',
html: '<span id="flip2">Page 2 B</span>'
});


var panel2 = new Ext.Panel({
layout: 'card',
fullscreen: true,

items: [panel2a, panel2b]
});


var panel3 = new Ext.Panel({
fullscreen: true,
style: 'background-color: white;',
html: 'Page 3'
});


var rootPanel = new Ext.Carousel({
fullscreen: true,
direction: 'horizontal',
items: [panel1, panel2, panel3]
});



var span1 = Ext.get('flip1');
span1.addListener(
'tap',
function(){
panel2.setActiveItem(1,'flip');
}
);

var span2 = Ext.get('flip2');
span2.addListener(
'tap',
function(){
panel2.setActiveItem(0,'flip');
}
);



}
});