setActiveItem in carrousel on startup

[reverdin]

I have a carrousel and I want the last item to be automatically selected on startup.

As it will be dynamically generated, I can't use the activeItem property so I added a listener to do it with the items length. In my listener, the getActiveItem is working but not the setActiveItem, it throw me the following error:
TypeError: Result of expression 'currentSize' [undefined] is not an object.

Could somebody look at the following code and help me.

Many thanks in advance.



var carousel = new Ext.Carousel({
fullscreen: true,
indicator: false,
items: [
{
html: '<h1>2005</h1>'
},
{
html: '<h1>2006</h1>'
},
{
html: '<h1>2007</h1>'
},
{
html: '<h1>2008</h1>'
},
{
html: '<h1>2009</h1>'
},
{
html: '<h1>2010</h1>'
}
],
listeners: {
afterlayout : function(el){
var itemNums = el.items.length;
el.setActiveItem(1);
console.log(el.getActiveIndex());
}
}
});

[mrsunshine]

use the afterrender event when doit this way, cause afterlayout only get the container as argument what you need is the component( carousel).

var carousel = new Ext.Carousel({
fullscreen: true,
indicator: false,
items: [
{
html: '<h1>2005</h1>'
},
{
html: '<h1>2006</h1>'
},
{
html: '<h1>2007</h1>'
},
{
html: '<h1>2008</h1>'
},
{
html: '<h1>2009</h1>'
},
{
html: '<h1>2010</h1>'
}
],
listeners: {
afterrender : function(cmp){
var itemNums = cmp.items.length;
cmp.setActiveItem(itemNums-1);
console.log(cmp.getActiveIndex());
}
}
});

[reverdin]

Thanks for your answer.

I tried your solution (which I already tried before) but it is unfortunately not working.

The cmp.items.length is correct, cmp.getActiveIndex return me the right index but as soon as I put the setActiveIndex, I get the following error:
TypeError: Result of expression 'newCard.el' [undefined] is not an object.

Do youn know if there is a way to put a function instead of a value for the activeItem property.

Perhaps I should use the store.length ?

Thanks for your time.

[mrsunshine]

do you wrap you code in a


Ext.setup({
onReady: function() {

}
});looks than like


Ext.setup({
onReady: function() {
var carousel = new Ext.Carousel({
fullscreen: true,
indicator: false,
items: [
{
html: '<h1>2005</h1>'
},
{
html: '<h1>2006</h1>'
},
{
html: '<h1>2007</h1>'
},
{
html: '<h1>2008</h1>'
},
{
html: '<h1>2009</h1>'
},
{
html: '<h1>2010</h1>'
}
],
listeners: {
afterrender : function(cmp){
var itemNums = cmp.items.length;
cmp.setActiveItem(itemNums-1);
console.log(cmp.getActiveIndex());
}
}
});
}
});
and should show you the 2010 panel and on you console 5 as you current index

[reverdin]

Thanks again.

It is not directly shown.

I have some cards with different element and when I click on an element, it switch to the card whith the carousel in it.

I tried your code directly in the onReady with a carousel.show() and it is working very well.

I will look the way I load the different applications of my webapp.

Thanks for your solution and your time

[reverdin]

The problem was that I was defining many component in separate JS files and called them in my main.js. As I am new to Sencha/Ext development I think the structure of my app is wrong. If I put all my compnent declarations in my main.js, it is working.

Thanks again for your help.