PDA

View Full Version : Nested items inside a carousel



tysoncadenhead
30 Oct 2010, 10:15 AM
I'm trying to build a carousel that contains panels with buttons inside of it. This is what it looks like:



new Ext.Carousel({
items: [{
xtype: 'panel',
items: [
new Ext.Button({
cls: 'icon-big twitter-icon ' + iconClass,
html: '<div class="icon-image"></div><div class="icon-text">Twitter</div>',
handler: function(){
application.fireEvent('twitter-list', 'left');
}
}),
new Ext.Button({
cls: 'icon-big news-icon ' + iconClass,
html: '<div class="icon-image"></div><div class="icon-text">News</div>',
handler: function(){
application.fireEvent('news-list', 'left');
}
}),
new Ext.Button({
cls: 'icon-big videos-icon ' + iconClass,
html: '<div class="icon-image"></div><div class="icon-text">Videos</div>',
handler: function(){
application.fireEvent('videos-list', 'left');
}
}),
new Ext.Button({
cls: 'icon-big events-icon ' + iconClass,
html: '<div class="icon-image"></div><div class="icon-text">Events</div>',
handler: function(){
application.fireEvent('events-list', 'left');
}
}),
new Ext.Button({
cls: 'icon-big contact-icon ' + iconClass,
html: '<div class="icon-image"></div><div class="icon-text">Contact</div>',
handler: function(){
application.fireEvent('contact-list', 'left');
}
}),
new Ext.Button({
cls: 'icon-big giving-icon ' + iconClass,
html: '<div class="icon-image"></div><div class="icon-text">Giving</div>',
handler: function(){
application.fireEvent('giving-list', 'left');
}
})
]
}, {
xtype: 'panel',
html: 'test'
}]
The strange thing is that the second panel (the one that just has the html string that says "test") works, but the nested items inside the first panel don't display. I inspected the DOM and the buttons aren't even being rendered to it at all. Before I put the buttons inside the carousel, they displayed, but it seems that if I have items inside of the items that a carousel has, they just don't display. Is there a workaround for this?

tysoncadenhead
30 Oct 2010, 11:58 AM
I figured it out. The items inside the carousel are being lazily rendered, so if you're having this problem, just try adding:



listeners: {
afterrender: function(cmp){
cmp.doLayout();
}
}


To the panel that isn't rendering it's contents and it should work... it did for me anyway.