PDA

View Full Version : load new panel on carousel click



Frances
25 Jan 2011, 9:42 PM
Hi all

Looking at a carousel which loads its item contents from a store, eg, Carousel 2 in the sencha examples (code attached for reference), I cannot figure out how to add an event so that when you click on the carousel active item, it loads a new panel with more details from that store record.

There's a simple example in this forum of how to load an overlay when tapping on the carousel, http://www.sencha.com/forum/showthread.php?109685-Carousel-click-instead-of-swipe&highlight=carousel+link

But I can't work out how to get the data from that record within that overlay.

Any clues very much appreciated !

Carousel 2 :

Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
Ext.getBody().mask('Loading...', 'x-mask-loading', false);
var panel = new Ext.Panel({
fullscreen: true,
layout: 'fit',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'First card',
handler: function(){
var carousel = panel.getComponent('carousel');
carousel.setActiveItem(0, 'fade');
}
},{
text: 'Last Card',
handler: function(){
var carousel = panel.getComponent('carousel');
carousel.setActiveItem(carousel.items.getCount() - 1, 'fade');
}
}]
}]
});

Ext.regModel('Card', {
fields: ['content', 'cls']
});

var store = new Ext.data.Store({
model: 'Card',
proxy: {
type: 'ajax',
url: 'data.xml',
reader: {
type: 'xml',
record: 'card'
}
},
listeners: {
single: true,
datachanged: function(){
Ext.getBody().unmask();
var items = [];

store.each(function(rec){
items.push({
html: rec.get('content'),
cls: 'card ' + rec.get('cls')
});
});

var carousel = new Ext.Carousel({
items: items,
itemId: 'carousel'
});
panel.add(carousel);
panel.doLayout();
}
}
});
store.read();
}
});

zeristoff
14 Nov 2011, 4:58 PM
Anyone? I would like to know it too.