1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    49
    Vote Rating
    0
    jbrown13 is on a distinguished road

      0  

    Default Answered: Sencha Carousel Example- Make it work in Ext.define()page

    Answered: Sencha Carousel Example- Make it work in Ext.define()page


    This is an the example code from sencha-touch-2.0.1 carousel.
    I am trying to get it to work in my code, I am using Ext.define to start my pages off.
    I am not sure what I am doing worng here. I would like the carousel to be in my Ext.define("JB.view.Gallery")
    But when I put the code in I am missing something,
    Thanks for any help


    Example Code my code at bottom.
    Code:
    //<debug>
    Ext.Loader.setPath({
        'Ext': '../../src'
    });
    //</debug>
    
    /**
     * This example demonstrates the Carousel component in Sencha Touch 2.
     *
     * The carousel can run both horizontally and vertically, and in this example in combine both
     * of them together.
     *
     * The final result will be 4 horizontal carousels inside 1 vertical carousel.
     * Each of the horizontal carousels will have a category of images within it.
     */
    Ext.application({
        //first we define the tablet + phone startup screens and the applicaiton icon url
        phoneStartupScreen: 'resources/loading/Homescreen.jpg',
        tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',
    
        glossOnIcon: false,
        icon: {
            57: 'resources/icons/icon.png',
            72: 'resources/icons/icon@72.png',
            114: 'resources/icons/icon@2x.png',
            144: 'resources/icons/icon@114.png'
        },
    
        //here we require any components we are using in our application
        requires: [
            'Ext.carousel.Carousel',
            'Ext.Img'
        ],
    
        /**
         * The launch method is called when the browser is ready and the application is ready to
         * launch.
         */
        launch: function() {
            //first we define each of the categories we have for each one of the horixontal carousels
            //these images can be found inside resources/photos/{category_name}/*
            var categories = ['Food', 'Animals', 'Cars', 'Architecture'],
                itemsCountPerCategory = 10,
                horizontalCarousels = [],
                items, i, j, ln, category;
    
            //now we loop through each of the categories
            for (i = 0,ln = categories.length; i < ln; i++) {
                items = [];
                category = categories[i];
    
                for (j = 1; j <= itemsCountPerCategory; j++) {
                    //and push each of the image as an item into the items array
                    //you can see we are using the img xtype which is an image component,
                    //and we just give is a custom cls to style it, and the src
                    //of the image
                    items.push({
                        xtype: 'image',
                        cls: 'my-carousel-item-img',
                        src: 'resources/photos/' + category + '/' + j + '.jpg'
                    });
                }
    
                //now we add the new horizontal carousel for this category
                horizontalCarousels.push({
                    xtype: 'carousel',
    
                    //the direction is horizontal
                    direction: 'horizontal',
    
                    //we turn on direction lock so you cannot scroll diagonally
                    directionLock: true,
    
                    //and give it the items array
                    items: items
                });
            }
    
            //and finally we create the vertical carousel which contains each of the horizontal
            //category carousels above
            Ext.Viewport.add({
                xtype: 'carousel',
    
                //this time direction vertical
                direction: 'vertical',
    
                //and the horizontalCarousels array
                items: horizontalCarousels
            });
        }
    });
    This is my code from my Gallery page.

    Code:
    Ext.define('JB.view.Gallery', {
        extend: 'Ext.Carousel',
         xtype:'gallery',
        
         config:{
              
                    title: 'Gallery',
                    iconCls: 'star', 
                    
                    
         },
     
        launch: function() {
            //first we define each of the categories we have for each one of the horixontal carousels
            //these images can be found inside resources/photos/{category_name}/*
            var categories = ['Food', 'Animals', 'Cars', 'Architecture'],
                itemsCountPerCategory = 10,
                horizontalCarousels = [],
                items, i, j, ln, category;
    
            //now we loop through each of the categories
            for (i = 0,ln = categories.length; i < ln; i++) {
                items = [];
                category = categories[i];
    
                for (j = 1; j <= itemsCountPerCategory; j++) {
                    //and push each of the image as an item into the items array
                    //you can see we are using the img xtype which is an image component,
                    //and we just give is a custom cls to style it, and the src
                    //of the image
                    items.push({
                        xtype: 'image',
                        cls: 'my-carousel-item-img',
                        src: 'resources/photos/' + category + '/' + j + '.jpg'
                    });
                }
    
                //now we add the new horizontal carousel for this category
                horizontalCarousels.push({
                    xtype: 'carousel',
    
                    //the direction is horizontal
                    direction: 'horizontal',
    
                    //we turn on direction lock so you cannot scroll diagonally
                    directionLock: true,
    
                    //and give it the items array
                    items: items
                });
            }
    
            //and finally we create the vertical carousel which contains each of the horizontal
            //category carousels above
            Ext.Viewport.add({
                xtype: 'carousel',
    
                //this time direction vertical
                direction: 'vertical',
    
                //and the horizontalCarousels array
                items: horizontalCarousels
            });
        }
     
     
     });
    When I run this the the images are not showing up.
    What am I doing worng here?

  2. Did you check to see if launch was fired on a component (hint, it's not). Here is a working example:

    Code:
    Ext.define('JB.view.Gallery', {
        extend : 'Ext.Carousel',
        xtype  : 'gallery',
    
        config : {
            title     : 'Gallery',
            iconCls   : 'star',
            direction : 'vertical'
        },
    
        initialize : function () {
            //first we define each of the categories we have for each one of the horixontal carousels
            //these images can be found inside resources/photos/{category_name}/*
            var categories = ['Food', 'Animals', 'Cars', 'Architecture'],
                itemsCountPerCategory = 10,
                horizontalCarousels = [],
                items, i, j, ln, category;
    
            //now we loop through each of the categories
            for (i = 0, ln = categories.length; i < ln; i++) {
                items = [];
                category = categories[i];
    
                for (j = 1; j <= itemsCountPerCategory; j++) {
                    //and push each of the image as an item into the items array
                    //you can see we are using the img xtype which is an image component,
                    //and we just give is a custom cls to style it, and the src
                    //of the image
                    items.push({
                        xtype : 'image',
                        cls   : 'my-carousel-item-img',
                        src   : 'resources/photos/' + category + '/' + j + '.jpg'
                    });
                }
    
                //now we add the new horizontal carousel for this category
                horizontalCarousels.push({
                    xtype         : 'carousel',
    
                    //the direction is horizontal
                    direction     : 'horizontal',
    
                    //we turn on direction lock so you cannot scroll diagonally
                    directionLock : true,
    
                    //and give it the items array
                    items         : items
                });
            }
    
            //add horizontal carousels to this carousel
            this.add(horizontalCarousels);
    
            this.callParent();
        }
    });

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    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


    Did you check to see if launch was fired on a component (hint, it's not). Here is a working example:

    Code:
    Ext.define('JB.view.Gallery', {
        extend : 'Ext.Carousel',
        xtype  : 'gallery',
    
        config : {
            title     : 'Gallery',
            iconCls   : 'star',
            direction : 'vertical'
        },
    
        initialize : function () {
            //first we define each of the categories we have for each one of the horixontal carousels
            //these images can be found inside resources/photos/{category_name}/*
            var categories = ['Food', 'Animals', 'Cars', 'Architecture'],
                itemsCountPerCategory = 10,
                horizontalCarousels = [],
                items, i, j, ln, category;
    
            //now we loop through each of the categories
            for (i = 0, ln = categories.length; i < ln; i++) {
                items = [];
                category = categories[i];
    
                for (j = 1; j <= itemsCountPerCategory; j++) {
                    //and push each of the image as an item into the items array
                    //you can see we are using the img xtype which is an image component,
                    //and we just give is a custom cls to style it, and the src
                    //of the image
                    items.push({
                        xtype : 'image',
                        cls   : 'my-carousel-item-img',
                        src   : 'resources/photos/' + category + '/' + j + '.jpg'
                    });
                }
    
                //now we add the new horizontal carousel for this category
                horizontalCarousels.push({
                    xtype         : 'carousel',
    
                    //the direction is horizontal
                    direction     : 'horizontal',
    
                    //we turn on direction lock so you cannot scroll diagonally
                    directionLock : true,
    
                    //and give it the items array
                    items         : items
                });
            }
    
            //add horizontal carousels to this carousel
            this.add(horizontalCarousels);
    
            this.callParent();
        }
    });
    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.

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    49
    Vote Rating
    0
    jbrown13 is on a distinguished road

      0  

    Default


    THANK YOU !!!

Thread Participants: 1

Tags for this Thread