Navigation between cards

[eriklarsson]

Hi all,

I have a quite simple question, I can't seem to wrap my head around on how the card-stack works in Sencha, would love to get some pointers on how to achieve something simple as this:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {



ht = new Ext.Panel({
fullscreen: true,
layout: 'fit',
cls: 'card1',
items: [

{ html: '<div class="ht"><div class="ht_btn"><a href="card2">1</a></div></div>'}
]
})

ho = new Ext.Panel({
fullscreen: true,
layout: 'fit',
cls: 'card2',
items: [
{ html: '<div class="ht"><div class="ht_btn"><a href="card1">2</a></div></div>'}
]
})

}
});

[evant]

Ext.setup({
onReady: function(){
var container = new Ext.Panel({
fullscreen: true,
layout: 'card',
items: [{
cls: 'card1',
html: '<div class="ht"><div class="ht_btn"><a href="card2">1</a></div></div>',
itemId: 'ht'
},{
cls: 'card2',
html: '<div class="ht"><div class="ht_btn"><a href="card1">2</a></div></div>',
itemId: 'ho'
}]
});

setTimeout(function(){
container.setActiveItem('ho');
}, 1000);

}
});

[eriklarsson]

Thank you Evan, I now understand that it's about creating a card layout.
In your example you set some kind of timeout, if I wanted to navigate using
the hrefs how would I go about it?



Ext.setup({
onReady: function(){
var container = new Ext.Panel({
fullscreen: true,
layout: 'card',
items: [{
cls: 'card1',
html: '<div class="ht"><div class="ht_btn"><a href="card2">1</a></div></div>',
itemId: 'ht'
},{
cls: 'card2',
html: '<div class="ht"><div class="ht_btn"><a href="card1">2</a></div></div>',
itemId: 'ho'
}]
});

setTimeout(function(){
container.setActiveItem('ho');
}, 1000);

}
});


Thanks for the very fast answer!