1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    19
    Vote Rating
    -1
    sencha_ID_auf has a little shameless behaviour in the past

      0  

    Default Answered: Carousel not render

    Answered: Carousel not render


    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 :
    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);
        }
    });
    Code:
    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);
         
         }
    
    
        
    });

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

    Code:
    config : {
        layout : 'fit'
    }

  3. #2
    Sencha User
    Join Date
    May 2012
    Posts
    19
    Vote Rating
    -1
    sencha_ID_auf has a little shameless behaviour in the past

      -1  

    Default


    up.

    No one get an idea?

  4. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,604
    Answers
    3450
    Vote Rating
    818
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


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

    Code:
    config : {
        layout : 'fit'
    }
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #4
    Sencha User
    Join Date
    May 2012
    Posts
    19
    Vote Rating
    -1
    sencha_ID_auf has a little shameless behaviour in the past

      0  

    Default


    Thanks a lot.

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

Thread Participants: 1

Tags for this Thread