Carousel not render

[sencha_ID_auf]

Hi,

I'm new on sencha and I don't understand why my carousel isn't rendered. When the carousel is pushed alone (for example push({xtype: 'articleCarousel'})) everything is fine but when it's in a container (this.push({xtype:'aufArticleManagerView'})) I can't see anything.


Here is the code :

Ext.define('aufNews.view.ArticleManager',{
    extend: 'Ext.Container',
    xtype: 'aufArticleManagerView',
    layout:'vbox',


    requires : ['aufNews.view.ArticleCarousel'],
   




    initialize:function() {
    this.callParent(arguments);
    
    var carousel =  new aufNews.view.ArticleCarousel({
        xtype: 'articleCarousel',
    });


    var twitterButton = {
            xtype: "button",
            text: "Twitter",
            ui: "action",
        handler:this.pushShareArticleOnTwitter,
        scope:this
    };


    var googleButton = {
            xtype: "button",
            text: "Google+",
            ui: "action",
        handler:this.pushShareArticleOnGoogle,
        scope:this        
    };


    var mailButton = {
            xtype: "button",
            text: "Mail",
            ui: "action",
            handler: this.pushShareArticleOnMail,
        scope: this
            
    };


    var facebookButton =     {
            xtype: "button",
            text: "Facebook",
            ui: "action",
            handler:this.pushShareArticleOnFacebook,
        scope: this
        
    };


    var commentButton =     {
            xtype: "button",
            text: "Commenter",
            ui: "action",
            handler:this.pushCommentArticle,
        scope: this
        
    };


    var bottomToolbar =  {
            xtype: 'toolbar',
        id: 'articleBottomToolbar',
            docked: "bottom",
            items: [ twitterButton,googleButton,mailButton,facebookButton,commentButton ]
        };


    //panel.add([topToolbar]);
    this.add([carousel,bottomToolbar]);
    this.fireEvent("articleManagerViewDidAppear",this);
    }
});

Ext.define('aufNews.view.ArticleCarousel',{
    extend: 'Ext.Carousel',
    xtype:'articleCarousel',


    requires: [
    //'Ext.layout.container',
    'Ext.carousel.Carousel',
    'Ext.data.proxy.JsonP'
    ],  


    config: {
    id: 'infiniteArticleCarousel',
    direction: 'horizontal',
    fullscreen: true,
    indicator: false,
    
    listeners: {
            move : {
        element: 'element',
        fn : function(container,item,toIndex,fromIndex,eOpts){
            console.log('move');
        }
        },
            activeitemchange: function(carousel, item) {
        console.log("Change " + item);
        this.fireEvent("changeCarouselElement",this);
        console.log(carousel.activeIndex);
        if(carousel.activeIndex == (carousel.carouselItems.length - 1)){
            //moveActionComputed = false;
            console.log("chargement nouveau élement >");
            carousel.add({
            xtype: 'aufArticleView',
            layout:'card',
            articleID: '219840',
            articleURL: ...,
            });
            
            carousel.removeAt(0);
            carousel.add({
            xtype: 'aufArticleView',
            layout:'card',
            articleID: '219843',
            articleURL: ...,
            
            });
            carousel.removeAt(0);
            
        } else if((carousel.activeIndex == 0)/* && !carousel.moveActionComputed*/){
            //carousel.moveActionComputed = true; 
            console.log("chargement nouveau élement <");
            
            carousel.insert(0,{
            xtype: 'aufArticleView',
            layout:'card',
            articleID: '219841',
            articleURL: ...,
            
            });
            //console.log(carousel.carouselItems.length - 1);
            carousel.removeAt(carousel.carouselItems.length - 1); 
           
            carousel.insert(0,{
            xtype: 'aufArticleView',
            layout:'card',
            articleID: '220331',
            articleURL: ...,
            //html: '<p>Navigate the carousel on this page by swiping left/right.</p>',
            //cls : 'card card1'
            });
            
            
            
            
            
        }
        
            }
            
    },


    items: [
            {
        xtype: 'aufArticleView',
        articleID: '219841',
        layout:'card',
        articleURL: ...,
        //html: '<p>Navigate the carousel on this page by swiping left/right.</p>',
        //cls : 'card card1'
            },
            {
        xtype: 'aufArticleView',
        articleID: '220331',
        layout:'card',
        articleURL: ...,
        //html: '<p>Clicking on either side of the indicators below</p>',
        //cls : 'card card2'
            },
            {
        xtype: 'aufArticleView',
        articleID: '220858',
        layout:'card',
        articleURL: ...,
        //html: 'Card #3',
        //cls : 'card card3'
            }
    ]




    },


     initialize:function() {
     this.callParent(arguments);
     this.setActiveItem(1,"slide");
     this.fireEvent("carouselRender",this);
     
     }


    
});

[sencha_ID_auf]

up.

No one get an idea?

[mitchellsimoens]

In your aufNews.view.ArticleManager, remove the layout : 'vbox' (it's in the wrong spot anyway) and add this in it's spot:

config : {
    layout : 'fit'
}

[sencha_ID_auf]

Thanks a lot.

I tried layout:'fit' but without the config.