PDA

View Full Version : Getting ID from the carousel items



KPChow
11 Oct 2011, 7:35 AM
Hi guys,

I'm slightly stuck and would be grateful if I can get some direction.

At the moment, I have got a carousel with a toolbar at the top which has a button that opens a panel.



var carousel = new Ext.Carousel({
style: 'background-color: white;',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [
{
text: 'Back',
ui: 'back',
handler: function() {
console.log('back');
}
},{
text: 'read more',
handler: function() {
console.log('read more');
mainPanel.setActiveItem(portfolio, 'slide');
}
}
]
}],
fullscreen: true,
items:[{
html:'slide1',
id: 'slide1'
},{
html:'slide2',
id: 'slide2'
},{
html:'slide3',
id: 'slide3'
},{
html:'slide4',
id: 'slide4'
},{
html:'slide 5',
id: 'slide5'
},{
html:'slide 6',
id: 'slide6'
}]
});

var portfolio = new Ext.Panel({
fullscreen: true,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'Back',
ui: 'back',
handler: function() {
mainPanel.setActiveItem(carousel, {type:'slide', direction:'right'});
console.log('back to home page');
}
}]
}],
html:'asdasd'

});



What I like to achieve now is for the 'read more' button to dynamically open the panel, depending on which slide of the carousel you're on. i.e. if you're on 'slide 1' of the carousel, it would open the panel with the html content displaying the id 'slide1'.

Initially, I thought I need to apply "mainPanel.items.getID();" into the handler but that's not the case.

What's the way to grab the ID from the items?

Thanks
K

AndreaCammarata
11 Oct 2011, 8:13 AM
Hi.
I write you a fast full example.
Please let me know if you need to know something more about it.



Ext.setup({
onReady: function() {

var pnl = new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'carousel',
itemId: 'myCarousel',
flex: 1,
style: 'background-color: white;',
dockedItems: [{
xtype: 'toolbar',
items: [{
xtype: 'button',
text: 'Back',
ui: 'back',
handler: function() {
console.log('back');
}
},{
xtype: 'button',
text: 'read more',
handler: function() {

//Get the current Index
var currentIndex = pnl.getComponent('myCarousel').getActiveIndex() + 1;

//Set as active the corrisponding panel
pnl.getComponent('pnlHelp').setActiveItem('cardHelp' + currentIndex);
}
}]
}],
items:[{
html:'slide1',
id: 'slide1'
},{
html:'slide2',
id: 'slide2'
},{
html:'slide3',
id: 'slide3'
},{
html:'slide4',
id: 'slide4'
},{
html:'slide 5',
id: 'slide5'
},{
html:'slide 6',
id: 'slide6'
}]
},{
xtype: 'panel',
itemId: 'pnlHelp',
flex: 1,
layout: 'card',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'Back',
ui: 'back',
handler: function() {
mainPanel.setActiveItem(carousel, {type:'slide', direction:'right'});
console.log('back to home page');
}
}]
}],
items: [{
itemId: 'cardHelp1',
html: 'Info Card 1'
},{
itemId: 'cardHelp2',
html: 'Info Card 2'
},{
itemId: 'cardHelp3',
html: 'Info Card 3'
},{
itemId: 'cardHelp4',
html: 'Info Card 4'
},{
itemId: 'cardHelp5',
html: 'Info Card 5'
},{
itemId: 'cardHelp6',
html: 'Info Card 6'
}]
}]
});
}

});


Hope this helps.

AndreaCammarata
11 Oct 2011, 8:13 AM
Empty post!
I just want to skip the post number 666 :D

KPChow
25 Oct 2011, 7:22 AM
Thanks for the reply Andrea (apologies for the late reply to!).

Having seen your code, I think I know where I need to go with this now. Will let everyone know when I get round to doing this - currently busy doing other stuff right now. :(

K

zeristoff
14 Nov 2011, 5:02 PM
Hi Andrea,

how do you get the record from the carousel item tap?

digeridoo
15 Nov 2011, 4:16 AM
Does this post help you?

http://www.sencha.com/forum/showthread.php?147328-Adding-listener-to-an-element-in-a-XTemplate&highlight=listener+tpl