PDA

View Full Version : What's the best way to show the flip side of a card?



pwayner
4 Jan 2011, 12:49 PM
I've got the cards moving along nicely in a carousel view. That was easy. I can respond to a tap or a double tap. The trouble comes when I want to display something. It's possible to create an alert, but the alert only closes when it's tapped outside of it. If I make it the size of the screen, it hangs.

One thought was to create another Panel called back and then call

back.show('flip');

when the tap is found. But this just doesn't work.

(In general it would be nice to have more documentation about switching between panels without sticking them in a tab view or something else.)

Thanks,

evant
4 Jan 2011, 4:17 PM
http://dev.sencha.com/deploy/touch/docs/?class=Ext.Container&member=setActiveItem

pwayner
4 Jan 2011, 4:29 PM
And so I should use a CardLayout? I've tried using the setActiveItem and it didn't work. Now I notice that the documentation says it requires a CardLayout. Are there any other options? Or is the CardLayout the way to go?

evant
4 Jan 2011, 4:30 PM
A carousel uses a card layout by default.

pwayner
4 Jan 2011, 4:48 PM
Is it possible to wrap another cardlayout around the carousel and switch between the carousel and a card/panel?

gcallaghan
5 Jan 2011, 10:36 AM
yep, should be several more examples on the forum

pwayner
5 Jan 2011, 12:04 PM
Thanks. Now what is the best way to flip them over. In the following example, I've tried these methods:

back.show('flip'); //<-- works
carousel1.show('flip'); //<-- does not work. Doesn't return.
mainpanel.setActiveItem(back);//<-- does not work. Doesn't return.
mainpanel.setActiveItem(0);//<-- does not work. Doesn't return.
mainpanel.setCard(0);//<-- does not work. Doesn't return.
mainpanel.setCard(back);//<-- does not work. Doesn't return.

Any ideas?

Code:

var mainpanel= new Ext.Panel({
fullscreen: true,
layout: 'card',
items: [carousel1, back]
});

var carousel1 = new Ext.Carousel({
defaults: {
cls: 'card'
},
items: d
});


var back = new Ext.Panel({
cls: 'htmlcontent',
html:'<img src="blah.jpg" width="320px" height="480px">'
});

gcallaghan
5 Jan 2011, 5:53 PM
is that the order of your code? I think it would error as back and carousel1 have not been defined. I'd try something like...


var mainpanel= new Ext.Panel({
fullscreen: true,
layout: 'card',
items: [
{xtype:'panel',items:[{html:'foo'}]},

{
xtype : 'carousel',
ui : 'light',
direction: 'vertical',

items: [
{
html: '<p>Carousels can be vertical and given a ui of "light" or "dark".</p>',
cls : 'card card1'
},
{
html: 'Card #2',
cls : 'card card2'
},
{
html: 'Card #3',
cls : 'card card3'
}
]
}
]
});

mainpanel.setActiveItem(1,'flip');

pwayner
5 Jan 2011, 5:58 PM
No. That's not the order. I clipped it to remove other extraneous details. I don't see any errors reported on the console. The code just doesn't do anything when presented with the lines I've marked as "won't work". I follow them through the debugger on Safari and nothing happens.

evant
5 Jan 2011, 6:06 PM
Ext.setup({
onReady: function(){
var main = new Ext.Panel({
fullscreen: true,
layout: 'card',
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'First',
handler: function(){
main.setActiveItem(0);
}
},{
html: 'Second',
handler: function(){
main.setActiveItem(1);
}
}]
}],
items: [{
html: 'First'
},{
xtype: 'carousel',
items: [{
html: 'car1'
},{
html: 'car2'
},{
html: 'car3'
}]
}]
});
}
});

gcallaghan
5 Jan 2011, 6:13 PM
Ahh, a man much more wise than me. the only thing I would add is...


var main = new Ext.Panel({
...
cardSwitchAnimation:'flip',
...right Evant?

pwayner
6 Jan 2011, 5:46 AM
Evan-- Thanks. That seems to work.

I did find a solution to my quandry. In my code above, it's not mainpanel.setActiveItem() but mainpanel.layout.setActiveItem().

That works.