PDA

View Full Version : Carousel and setActiveItem



appsandcheese.com
22 Jul 2011, 8:38 PM
Greetings... another n00b here :)

I'm having issue setting activeItem inside the carousel component. My app has two panels (home, page).
Home panel just contains list, page panel is carousel panel. The app works by sliding from home to page. What I want to accomplish is to dynamically add items to carousel depending on the selection from the home panel. I'm doing that successfully. When I return from page to home I remove all the items from carousel and rebuild new items once based on the home selection. This is where things break. The app works fine very first time and each time thereafter it breaks. I've tracked it down to setActiveItem returning -1 and not being able to set the item to 0 ... here's the code...

http://www.appsandcheese.com/TestApp/

new Ext.Application({

name : 'TestApp',
launch : function() {

Ext.regModel('TableOfContent', {
fields: ['tocItem']
});


TestApp.listOptionsStore = new Ext.data.Store({
model: 'TableOfContent',
//sorters: 'tocItem',
getGroupString : function(record) {
return record.get('tocItem')[0];
},
data: [
{tocItem: 'Item 1'},
{tocItem: 'Item 2'},
{tocItem: 'Item 3'},
{tocItem: 'Item 4'},
{tocItem: 'Item 5'},
{tocItem: 'Item 6'},
{tocItem: 'Item 7'},
{tocItem: 'Item 8'},
]
});


TestApp.views.carouselPanel = new Ext.Carousel({
activeItem : 0,
layout : {
type : 'card',
},
dockedItems : [
{
xtype : 'toolbar',
dock : 'top',
items : [
{
xtype : 'button',
text : 'Table of Contents',
handler : function() {
TestApp.views.viewport.setActiveItem(TestApp.views.homePanel,{type: 'slide', direction: 'right'});
TestApp.views.carouselPanel.removeAll(true);
}
},
{
xtype : 'spacer',
},
{
xtype : 'searchfield',
id : 'sf',
listeners : {
keyup: function(textField, eventObject) {
TestApp.views.popover.show();
TestApp.views.popover.showBy(textField);
}
}
}
]
}
],
});



TestApp.views.TestAppOptions = new Ext.List({
itemTpl : '{tocItem}',
listeners : {
itemtap : function(dataView, index, item, eventObject) {

var carouselItems = (index + 5);

var cardItems = new Array();

for (var i = 0; i < carouselItems; i++) {
var card = 'card' + i;
TestApp.views.carouselPanel.add( new Ext.Panel({card: card, html: card}));
}

//TestApp.views.carouselPanel.doLayout();
TestApp.views.carouselPanel.doComponentLayout();

//TestApp.views.carouselPanel.setActiveItem(0);

TestApp.views.viewport.setActiveItem(TestApp.views.carouselPanel, {type: 'slide', direction: 'left'});

console.log('Active item ' + TestApp.views.carouselPanel.getActiveIndex());
}
},
store: TestApp.listOptionsStore
});



TestApp.views.homePanel = new Ext.Panel({
items : [TestApp.views.TestAppOptions],
})


/* application viewport */
TestApp.views.viewport = new Ext.Panel({
fullscreen : true,
html : 'viewport',
style : 'background-color: #fff',
items : [
TestApp.views.homePanel,
TestApp.views.carouselPanel,
],
layout : {
type : 'card',
},

});

}

}); // end Application

I'm probably doing this wrong. Should I just dynamically recreate entire carousel component and remove it each time i go back and forth... any pointers, suggestions, etc are greatly appreciated.