[FIXED-40] 0.82 Ext.Carousel doesn't honor activeItem config

[watrboy00]

    /**
     * @cfg {String/Number} activeItem
     * A string component id or the numeric index of the component that should be initially activated within the
     * container's layout on render.  For example, activeItem: 'item-1' or activeItem: 0 (index 0 = the first
     * item in the container's collection).  activeItem only applies to layout styles that can display
     * items one at a time (like {@link Ext.layout.CardLayout} and
     * {@link Ext.layout.FitLayout}).  Related to {@link Ext.layout.ContainerLayout#activeItem}.
     */

Ext.Container has activeItem config and it states that the specified activeItem will be initially activated within a container's layout on render. I see a couple problems here.

First...Ext.Carousel extends from Ext.Container and in its afterRender function sets the active item but defaults to the first item instead of first checking to see if activeItem exists and setting it as active if so.

    afterRender : function() {
        Ext.Carousel.superclass.afterRender.call(this);
        
        this.scroller.on({
            touchend: this.onTouchEnd, 
            scrollend: this.onScrollEnd,
            scope: this
        });
        
        if (this.items.items.length) {
            this.setActiveItem(this.items.items[0]);
        }        
    }

Second: I think some logic is backwards or could be better. If the docs say that the layout will set the active item on render then why is it that the carousel is setting the active item? Instead of setting it in the after render function of carousel why wouldn't the layout do the heavy lifting itself? Then all the carousel would have to do is specific actions that need to take place after and item has been activated.

There could be huge code savings if this were mimicked across the framework and abstracted to the layout where it should be.

[TommyMaintz]

I was initially using the CardLayout for the Carousel, and ended up writing more code to counter some of the CardLayout behaviors, then it took to have the setActiveItem method in the Carousel. The activeItem config option should be respected nonetheless. I will see if switching to CardLayout might benefit us, and make sure activeItem is respected. Thanks for the report.

[meyerovb]

Please re-open, while the indicator is switched to the correct item, the display area is not. Load the below example, the second carousel icon is highlighted, but the first card is shown:

Ext.setup({ onReady: function () {
new Ext.Carousel({
    fullscreen: true,
    items: [{ html: 'card1' }, { html: 'card2'}],
    activeItem: 1
});
}});

[TommyMaintz]

We had to rewrite Carousel completely because of some issues with inserting items to the beginning on the Carousel causing a flicker. We have just finished this rewrite, and I tested activeItem on the latest code base. This problem seems to be resolved.

This will be part of 0.9.3, which will be released on Monday next week. If the problem still persists after that release, a test case that shows the issue would be helpful.