PDA

View Full Version : Animate slide for Card layout?



abcdef
26 Aug 2011, 3:17 PM
Is there a way to animate the card switch in a card layout?

Slide animation from right to left when switching to 'next' card, and vice versa?

Please help!

Thanks!

wheelhouse
26 Aug 2011, 5:15 PM
I tried this as well and did not have any luck with card layout. Try just using a Container with nested panels as the so called "cards" and toggle visibility of the active item. You can then add animations to the panel as needed. Here is some sample code to help get the idea...



{
itemId: 'cont',
xtype: 'container',
items: [{
itemId: 'a',
html: 'one'
},{
itemId: 'b',
hidden: true,
html: 'two'
}
]
}

// function to swap panels
panelSwitcher: function(i) {
// access conv somehow
this.down('#conv');

if (!this.lastPanel) {
this.lastPanel = 0;
}


c.items.items[this.lastPanel].hide();
c.items.items[i].show(); // instead of show, replace with animation
this.lastPanel = i;
c.doLayout();
}

skirtle
29 Aug 2011, 4:06 AM
Sliding the new one in at the same time as the old one slides out is quite tricky. Doing one then the other is much easier:


Ext.create('Ext.panel.Panel', {
height: 300,
layout: 'card',
renderTo: Ext.getBody(),
width: 300,
items: [
{
html: 'My card',
title: 'Card 1'
}, {
html: 'My other card',
title: 'Card 2'
}
],
tbar: [
{
text: 'Next',
handler: function() {
var ct = this.up('panel'),
layout = ct.getLayout(),
first = ct.getComponent(0),
second = ct.getComponent(1);

first.getEl().slideOut('l', {
callback: function() {
layout.setActiveItem(second);
second.hide();
second.getEl().slideIn('r');
}
});
}
}
]
});

A bit of tidying up needed to cover the edge cases (like multiple clicks on the Next button) but it demonstrates the principle.

abcdef
30 Aug 2011, 9:41 PM
Sliding the new one in at the same time as the old one slides out is quite tricky. Doing one then the other is much easier:


Ext.create('Ext.panel.Panel', {
height: 300,
layout: 'card',
renderTo: Ext.getBody(),
width: 300,
items: [
{
html: 'My card',
title: 'Card 1'
}, {
html: 'My other card',
title: 'Card 2'
}
],
tbar: [
{
text: 'Next',
handler: function() {
var ct = this.up('panel'),
layout = ct.getLayout(),
first = ct.getComponent(0),
second = ct.getComponent(1);

first.getEl().slideOut('l', {
callback: function() {
layout.setActiveItem(second);
second.hide();
second.getEl().slideIn('r');
}
});
}
}
]
});

A bit of tidying up needed to cover the edge cases (like multiple clicks on the Next button) but it demonstrates the principle.

Aah...Just noticed that Ext.Element has slide methods. Although, the animation isn't what I was hoping for. I needed it to be continuos. Thanks anyway..

abcdef
30 Aug 2011, 9:45 PM
Oh I marked my response to your answer as the best answer! Is there a way to change that? I don't see any controls to do that...

skirtle
1 Sep 2011, 10:37 AM
I believe there is a way to reset the answer but I'm not sure where. Perhaps in one of the menus at the top of the thread?

abcdef
2 Sep 2011, 10:39 AM
I believe there is a way to reset the answer but I'm not sure where. Perhaps in one of the menus at the top of the thread?

I tried looking there. I don't see any option to change the best answer anywhere. My apologies. I'll be careful next time!