PDA

View Full Version : dynamic carousel problems



matej_
11 Oct 2011, 2:07 PM
I have a TabPanel with 2 tabs.
Each tab has a panel that contains a carousel.
The carousel on the second tab has its items dynamicaly created on the beforeshow event of the parent panel. The content of this carousel is dependent on the first carousel.

First time the tab2 is displayed carousel works ok.
But if I switch back to tab1 and back again to tab2 the animation of the card switching on the carousel is broken. The image moves a little to the side but then jumps back to the center and the card is switched.

Please help.


App.views.GameVitreIndex = Ext.extend(Ext.TabPanel, {
cardSwitchAnimation: {type:'slide'},
itemId: 'gamevitre',
items: [
// ==========
// = Tab 1 -
// ==========
new Ext.Panel({
itemId: 'gamevitre-tab1',
title: 'Tab 1',
layout: {
type: 'hbox',
align: 'stretch',
pack: 'start',
},
items: [
// ==============================
// = Carousel =
// ==============================
new Ext.Carousel({
itemId: 'izbira-kroznika',
cls: 'bg-size-contain',
flex: 3,
items: [
{
cls : 'kroznik1 bg-image',
itemId: 'kroznik1',
},
{
cls : 'kroznik2 bg-image',
itemId: 'kroznik2',
},
],
})
]
}),




// =================================
// = Tab 2 -
// =================================
new Ext.Panel({
itemId: 'gamevitre-tab2',
title: 'Tab2',
layout: {
type: 'hbox',
align: 'stretch',
pack: 'start',
},
listeners: {
beforeshow: function() {
var carouselPanel = App.viewport.query('#izbira-notranje-vitre')[0];
var kroznik = App.viewport.query('#izbira-kroznika')[0].getActiveItem().itemId;

var notranje_vitre = ['nv1-1',
'nv1-2',
'nv2-1',
'nv2-2',
'nv3-1',
'nv3-2',
'nv4-1',
'nv4-2'];
var i = 0;
var nv_count = notranje_vitre.length;
var items = [];
items.push({cls:kroznik+' bg-image', itemId:kroznik});
for(i=0; i<nv_count; i++) {
var cls = kroznik+'_'+notranje_vitre[i];
items.push({cls:cls+' bg-image', itemId:cls});
}
carouselPanel.removeAll();
carouselPanel.add(items);
carouselPanel.doLayout();
},
},
items: [
// ====================================
// = Carousel =
// ====================================
new Ext.Carousel({
id: 'izbira-notranje-vitre',
itemId: 'izbira-notranje-vitre',
flex: 3,
layout: 'card',
items: [
// {cls:'kroznik1 bg-image', itemId:'kroznik1'},
// {cls:'kroznik1_nv1-1 bg-image', itemId:'kroznik1_nv1-1'}
],
}),
]
})
],


initComponent: function() {
App.views.GameVitreIndex.superclass.initComponent.apply(this, arguments);
}
});


Ext.reg('GameVitreIndex', App.views.GameVitreIndex);


I'm using Sencha Touch 1.1.0

matej_
11 Oct 2011, 2:59 PM
I moved the carousel item generation to the show event and everything works ok.